Animating with CSS
If you’ve worked with applications like Final Cut Pro or After Effects, you’ll have an instant advantage when working with CSS animations. CSS employs animation keyframing conventions found in timeline-based applications.
If you have never worked with keyframes or even come across the term, here is all you need to know. When you are devising an animation, you will choose key moments where things need to be in a certain position. Imagine a bouncing ball. At first, it is in the air, which would be one keyframe, and then it is on the floor, another keyframe. When you specify keyframes, the animation knows how to fill in the blanks between them and create the animation.
There are two components to a CSS animation; first, writing a set of keyframes inside an @keyframes at-rule declaration, and then employing that keyframe animation with the animation property and associated values. Let’s take a look.
In a previous example, we made a simple...