Motion and color - HTML5 and CSS3 - page 347

transitions, this is the normal level of pain for using experimental CSS —
each property has to be listed five times. Here's a section of code from ch09/
transition-delay-2.html:
-moz-transition-duration: 10s, 10s;
-webkit-transition-duration: 10s, 10s;
-o-transition-duration: 10s, 10s;
-ms-transition-duration: 10s, 10s;
transition-duration: 10s, 10s;
-moz-transition-delay: 0s, 10s;
-webkit-transition-delay: 0, 10s;
-o-transition-delay: 0, 10s;
-ms-transition-delay: 0, 10s;
transition-delay: 0, 10s;
-moz-transition-property: top, -moz-transform;
-webkit-transition-property: top, -webkit-transform;
-o-transition-property: top, -o-transform;
-ms-transition-property: top, -ms-transform;
transition-property: top, transform;
For animations, it's more of a pain. Even if you're only animating stan-
dard properties, you must specify the keyframes for every browser you
want to target, not including the standard declaration:
@-moz-keyframes bounce {
from { top: 50px; }
25% { top: 350px; }
50% { top: 50px; }
75% { top: 350px; }
to { top: 50px; }
}
@-webkit-keyframes bounce {
from { top: 50px; }
25% { top: 350px; }
50% { top: 50px; }
75% { top: 350px; }
to { top: 50px; }
}
@-o-keyframes bounce {
from { top: 50px; }
25% { top: 350px; }
50% { top: 50px; }
75% { top: 350px; }