JS Utility: CSS Transitions with jQuery Fallback

Uses Modernizr to detect support for CSS Transitions and falls back to jQuery .animate
Note that this demo doesn't make use of hardware-accelerated CSS transforms which may offer even smoother animations when combined with transitions.

Format

jQuery plugin. $.fn.doAnimate

Dependencies

• jQuery
• Modernizr.csstransitions

Usage

$('.target').doAnimate({'top': '100px'}, {duration: 750, easing: 'linear'});
$('.target').doAnimate({'left': '100px'}, {duration: 750, easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'});

Demo

Move Right Move Down Increase Width Fade Out Fade In Decrease Width Move up Move left