I am creating a website that uses some CSS3 keyframe animations.
The guides that I saw suggest using a separate code for each browser, defining which code for which browser, how I go.
eg. This is a guide that offers:
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
-moz-animation: NAME-YOUR-ANIMATION 5s infinite;
-o-animation: NAME-YOUR-ANIMATION 5s infinite;
animation: NAME-YOUR-ANIMATION 5s infinite;
}
And this one , which offers a slightly different grouping, but essentially the same thing.
However, I have seen many articles that say that finding browsers is bad practice on modern web pages.
This page (same site as above)
W3C agrees , but believes that an exception can be made for browser prefixes in css.
, , , ?