Motion and color - HTML5 and CSS3 - page 349

}
50% {
-moz-linear-gradient(to right, #f00, #fff, #f00)
-webkit-linear-gradient(left, #f00, #fff, #f00)
-o-linear-gradient(to right, #f00, #fff, #f00)
-ms-linear-gradient(to right, #f00, #fff, #f00)
-linear-gradient(to right, #f00, #fff, #f00)
}
to {
-moz-linear-gradient(to right, #f00, #fff)
-webkit-linear-gradient(left, #f00, #fff)
-o-linear-gradient(to right, #f00, #fff)
-ms-linear-gradient(to right, #f00, #fff)
-linear-gradient(to right, #f00, #fff)
}
}

This is a possible worst — case scenario; no need to start
panicking just yet. It's to illustrate that animations
necessarily multiply the browser prefix problem.

Using modernizr.js and jQuery for animation in older browsers
CSS Animations are intended to replace those implemented in libraries
like jQuery. Using modernizr.js, it's easy to detect whether a browser
supports CSS A nimations and, if it doesn't, to supply equivalent
jQuery animations instead. The following code is taken from ch09/
animations-modernizr.html; it's based on the earlier example ch09/
animations-1.html:

function bounce(el) {
$(el).animate({top: '350px'}, 5000)
.animate({top: '50px'}, 5000)
.animate({top: '350px'}, 5000)
.animate({top: '50px'}, 5000);
}
$(document).ready( function() {
if(!Modernizr.cssanimations) {
var refreshId;
$(function() {

jQuery equivalent
to bounce

True if animation
is supported