CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
Despyse
Despyse

Reputation: 55

CSS3 Animates in all but IE (10+)

EDIT: Problem was solved by using 1 instead of 100 in @keyframes.

I'm using some basic jQuery to keep everything on my site as a single .html doc. Doing so, I have 6 pages that are overlaid on each other, and I bring up the one a user clicks on via z-index.

I'm using the animations to fade out the old page and fade in the one clicked.

Here is my .visible class, .invisible is the same just with fadeout and a 1s duration. I expanded this class for legibility.

.visible{
    -webkit-animation:fadein;
    -webkit-animation-duration:2s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode:forwards;

    -moz-animation:fadein;
    -moz-animation-duration:2s;
    -moz-animation-timing-function:ease;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:1;
    -moz-animation-direction:normal;
    -moz-animation-fill-mode:forwards;

    -o-animation:fadein;
    -o-animation-duration:2s;
    -o-animation-timing-function:ease;
    -o-animation-delay:0s;
    -o-animation-iteration-count:1;
    -o-animation-direction:normal;
    -o-animation-fill-mode:forwards;

    animation:fadein;
    animation-duration:2s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode:forwards;
}

Currently, this is working as planned across the latest Chrome, Firefox, Safari, and Opera.

On IE11, however, the animation is not slowly changing the opacity. Instead, the page the user clicked on loads in without fade instantly (so the old and new page are on the screen at the same time), then a second or so later the old page disappears (instantly, without fade).

IE10+ supports CSS3, so I'm a bit confused as to what I'm doing wrong with it. Firefox and IE use the same bit of code, and Firefox is working fine.

Thanks in advance!

EDIT: Here is my @keyframes rules as requested:

@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:100;
    }
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:100;
    }
}

Upvotes: 0

Views: 89

Answers (1)

Josiah Keller
Josiah Keller

Reputation: 3675

Opacity is supposed to be between 0 and 1, with 1 being full opacity.

Upvotes: 3

Related Questions