1

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!

`

2
Contributors
1
Reply
10
Views
2 Years
Discussion Span
Last Post by pacav69
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.