Hi guys,
Weird (maybe silly) isse with a CSS fade property using the following classes:
/** CSS3 Animations **/
/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/** ------------------------------------------------ */
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.fadeIn-500ms {
-webkit-animation-duration:500ms;
-moz-animation-duration:500ms;
-o-animation-duration:500ms;
animation-duration:500ms;
}
.fadeIn-1s {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.fadeIn-1500ms {
-webkit-animation-duration:150ms;
-moz-animation-duration:150ms;
-o-animation-duration:150ms;
animation-duration:150ms;
}
.fadeIn-2s {
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
.fadeIn-2500ms {
-webkit-animation-duration:250ms;
-moz-animation-duration:250ms;
-o-animation-duration:250ms;
animation-duration:250ms;
}
.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn-delay-1s {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
.fadeIn-delay-1500ms {
-webkit-animation-delay:150ms;
-moz-animation-delay:150ms;
-o-animation-delay:150ms;
animation-delay:150ms;
}
.fadeIn-delay-2s {
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}
.fadeIn-delay-2500ms {
-webkit-animation-delay:250ms;
-moz-animation-delay:250ms;
-o-animation-delay:250ms;
animation-delay:250ms;
}
.fadeIn-delay-3s {
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;
}
And those are used within my HTML as below:
<div id="img-menu" class="menu-practioner-container fadeIn fadeIn-1s" >
<ul class="menu header-links">
<li class="header-autism fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#whatwedo">What we do<span ><img src="http://englishcraftsman.strong-links.org/images/about.png" /></span></a></li>
<li class="header-autism fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#email">Facebook<span><img src="http://englishcraftsman.strong-links.org/images/facebook.png" /></span></a></li>
<li class="header-email-us fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#email">Free Quotation</a></li>
</ul>
</div>
The problem is that my code is not recognising the values of split seconds, in this case, the 1500ms value. instead, they are assuming the 1s value of the div above. When I change the 1500ms to a whole value, e.g. 2s, it works fine.
Googling the issue turns up no issues, and I see people use miliseconds in online examples, so I can't figure out what this issue is!
`
