KeyFrames Fadein

HTML & CSS
1

Hi, does anyone know of a IE support for @keyframes fadein?

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
2

It looks like key-frames is supported in IE 10 +

1 Like
3

Why do you think you need to use vendor prefixes?

http://caniuse.com/#search=keyframes

4

I see thanks

hmm I have IE 11 and my animation wont work
on the browser weird…its an animation effect on page load. Website

then it also gives me this:

959Ă—50 16.5 KB

5

Did you try “allow blocked content”?

6

yeah it did nothing. it didnt make my animation work.

7

Can we get the full example from you that showcases this behavior not working? Either a link, or throw it up on codepen?

8

Sure the animation is on every page of the website it is a page load
fade in effect (Use IE browser - it works on the other browsers)

9

It doesn’t fade in in IE because you have not told IE to fade in.

 -moz-animation: fadein 2s; /* Firefox */
 -webkit-animation: fadein 2s; /* Safari and Chrome */
 -o-animation: fadein 2s; /* Opera */

There is no IE rule and there is no real animation rule. All you have is pre-fixes. You always have to include the real property.

     -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
   animation: fadein 2s; /* All modern browsers */

You have made that mistake in a number of places. These days a lot of prefixes can be dropped so check on caniuse when you need to see what needs to be supported.

2 Likes
10

You have the rule without the prefixes first, shouldn’t it be last?

11

Yes its best to put pre-fixes first because they don’t always work in the same way as the real property so its safer to have the real property last.

However the issue in Csosa’s code is that there is no real property in most of the rules.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.