CSS Animation Resources
October 9, 2013
I was learning the details of CSS animation/transition at work as I was building our new Waterfall theme, which involves some fancy infinite scrolling animations and thought the following resources were the most helpful. I’m still not sure how I’m going to get this compatible with the old IE’s. I’m likely going to have to tack on a JavaScript animation library as an IE fallback since I really want this theme to start appearing on websites.
Resources
- Controlling CSS Animations using JavaScript by Chris Coyier
- CSS Animations vs Transitions by Kirupa
- Looping a CSS Transition by Kirupa
- All you need to know about CSS Transitions by Alex Maccaw
Summary
- CSS Transitions and CSS Animations can do the same things, but have quirky differences:
- Transitions are easier to use when JavaScript needs to be used to change animations based on user interaction.
- Animations are easier to use if animations require no JavaScript intervention [easier looping, better keyframe control, does not need a trigger).
- Getting and setting the current animation state of a CSS Animation requires a setInterval counter hack, but is easier for a CSS Transition.
- Forcing GPU acceleration [using transform: translate3d(0,0,0)) may improve performance, but depends on the browser and machine.