If the animations seem slow or you experience a blinking effect on the whole
page, force hardware acceleration: Example: .animated_element { transform: translate3d(0, 0, 0); }
A newer (and more “by-the-book”) way of solving this problem is using the
will-change: transform
declaration — see
dev.opera.com/articles/css-will-change-property/.
The Running Cat by Rachel Nabors, is an awesome animation proving that fleshless animations are our future (although it will take some time). See cdpn.io/e/rCost + 24ways.org/2012/flashless-animation/.
If you want to set the trajectory of an animated object, take a look at the Stylie tool: jeremyckahn.github.io/stylie/.
The Ceaser tool will let you define your own animation timing function. See matthewlein.com/ceaser/.
Advanced CSS3 animation tutorial. See netmagazine.com/tutorials/masterclass-css-animations.