HTML and CSS Reference
In-Depth Information
to { top: 50px; }
}
@-ms-keyframes bounce {
from { top: 50px; }
25% { top: 350px; }
50% { top: 50px; }
75% { top: 350px; }
to { top: 50px; }
}
Then the element itself needs all the
animation-*
properties for each
browser:
#animateme {
-moz-animation-duration: 20s;
-moz-animation-name: bounce;
-moz-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-o-animation-duration: 20s;
-o-animation-name: bounce;
-o-animation-iteration-count: infinite;
-ms-animation-duration: 20s;
-ms-animation-name: bounce;
-ms-animation-iteration-count: infinite;
}
Of course, you should add the standard properties to this listing as
well. This will get really fun when the animation properties are stan-
dardized, but you want to use them to animate prefixed properties. For
example, it's not yet clear if gradients and animations will be standard-
ized at the same time (or even if gradients will be animatable) but if
animations get standardized first in browsers, you could end up writing
code like this:
@keyframes swipe {
from {
-moz-linear-gradient(to right, #fff, #f00)
-webkit-linear-gradient(left, #fff, #f00)
-o-linear-gradient(to right, #fff, #f00)
-ms-linear-gradient(to right, #fff, #f00)
-linear-gradient(to right, #fff, #f00)
