CSS3 transitions allow for simple animations but only allow control for the beginning and end of animations without giving you any choice on how they progress. Animations in CSS3 give us that control by allowing us to define how the animation will progress over time using a set of keyframes. We’re also allowed control over the frequency at which the animation executes, whether the animation is paused or running and the delay of the animation start time.
The only thing worse than discovering your application is crashing is having a customer tell you your application is crashing. Not too long ago I received panicked emails stating that, at some random intervals, our application was throwing 500s. Unfortunately I turned off push notifications (actually it has helped separate work/life - if it’s an emergency you’ll be getting a call) so I didn’t receive these emails until the next morning when I sat down at my desk.
My co-worker had already diagnosed the problem by the time I had arrived.
The CSS3 Transition spec has already defined various timing, or stepping, functions for us. What do these timing functions look like, you ask? Take a look.