Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Animations not working in IE (10-11, and all others)

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #247116
    UAVteam
    Participant

    I got this slider through a tutorial (unfortunately, I went through so many, I lost the link!). Basically, the final image gets stuck halfway on the page in IE11, and no animations show. Even if we could just get that last slide to show, I’d be a million times happier. Can anyone help me?

    http://www.unoallavolta.com/cssstinks/a/441/

    #247118
    Shikkediel
    Participant

    The animations are missing a default rule, only those with -moz- and -webkit- are present. If you add a rule without a prefix to the style on the page it should work. For example:

    #slider li.firstanimation {
        -moz-animation: cycle 25s linear infinite;
        -webkit-animation: cycle 25s linear infinite;
    }
    

    Would become:

    #slider li.firstanimation {
        -moz-animation: cycle 25s linear infinite;
        -webkit-animation: cycle 25s linear infinite;
        animation: cycle 25s linear infinite;
    }
    

    The line for Mozilla is mostly superfluous these days by the way.

    http://caniuse.com/#feat=css-animation

    #247143
    UAVteam
    Participant

    Thanks, but its not working.

    I added in the additional line, but now I am only seeing slide 5, then its blank until it rolls around again in firefox & chrome (works in safari!). I see no change in IE.

    #247144
    Shikkediel
    Participant

    Ah yes, the keyframes rules a bit below it will also need default style…

    /* ANIMATION */
    @-moz-keyframes cycle {
        0%  { top:0px; }
        4%  { top:0px; } 
    
    ...
    

    By the way, -ms-animation is a non-existing property. By the time IE enabled it, it could be used without a prefix.

    #247148
    UAVteam
    Participant

    Ok, so I removed the MOZ and MS, and made the updates you mentioned above. Now I am seeing exactly what I see in IE11. Like it got stuck, in Firefox (Chrome and safari are still ok).

    Hopefully this is a clue.

    #247153
    Shikkediel
    Participant

    You forgot an @ before keyframes. ;-)

    #247154
    UAVteam
    Participant

    Oh boy! Hah, Thanks!! Everythings working wonderfully!! Thank you for your patience and help.

    #247160
    Shikkediel
    Participant

    Glad to. :-)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.