https://github.com/julianshapiro/velocity
Can be used with or without jQuery
Same as jQuery syntax. Animations are sped up by reducing read/writes.
Can also apply values on translateX, translateY, etc
Calculates easing etc in javascript, sets them on the element
'Stagger' is v nice, but could probably be implemented easily with some JS and CSS3
Personally, I've had some performance problems on mobile with this
http://ricostacruz.com/jquery.transit/
Adds CSS3 transitions support to jQuery
Supports fallback to jQuery frame-based animation if unsupported browser
Performance based CSS3 lib
Aims to perform at 60fps
https://github.com/h5bp/Effeckt.css
Docs suck, not even sure how to use it
(Banner on top says it's not quite ready for prime time)
Web tool to generate CSS3 animation code
Or, generate the animations via javascript, and apply directly to elements, wow!
https://github.com/tictail/bounce.js/
http://daneden.github.io/animate.css/
Very popular, predefined transitions
Just add the animation class to object, eg: 'bounceOutLeft'
And then apply 'animated', using javascript if you like, to trigger it
Javascript benefits;
- Queue animations
- Trigger events after animations finish
- Greater control (play, rewind, etc)
- Interrupt
- Cancel animation
CSS benefits;
- Easier to debug (just add a class)
- Eg: javascript triggers animation on hover, crazy hard to debug
Links;
- http://davidwalsh.name/css-js-animation
- http://www.extreme-creations.co.uk/blog/velocity-js-vs-animate-css-which-is-faster-smoother-more-controllable/
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0,0,0);