As you have learned already, animation is the practice of using successive drawings to create the illusion of movement. A simple way to achieve this in your web design is by using CSS. When you animate using CSS, you are creating a transition between one CSS style to another instead of one drawing to another. You can change the position, color, size, borders, or other properties to create that same illusion of movement.
To start creating animations with CSS, we have to start by explaining keyframes.
Keyframes are referred to as frames because when animating for traditional entertainment they are measured on strips of film. The change between a series of keyframes is what creates the illusion of movement. We can use the
@keyframes rule in CSS to create animations for the web. Instead of changing from one image to another, you can change from one set of CSS styles to another.
When creating a
@keyframes rule, there are a few things you must include.
The following example shows a very simple use of keyframes, with only this start and end state. Notice how the object changed; visually, it went from a square to a circle, but if you look at the
@keyframes rule, you can see the transition from one CSS property of
border-radius: 0% to another,
Of course, more complex animations are going to involve more than just two frames. You can use percentages to define even more frames. Just make sure you include a start (0%) and an end (100%), and then you can create however many stopping points you want along the way. The example below includes two additional keyframes beyond the start and the end. This time, in addition to altering a simple visual property like color, the transition between different positions also creates movement.
But after you create a
@keyframe, how do you tell the animation to run and for how long?
In the CSS for the object/div you want to animate, you can use a variety of animation-related properties to tell your animation what to do. You should always specify the name and the duration of the animation, or it will never play. Here's a few more details about each of the properties...
animation-name: Surprise, surprise, this property invokes the animation.
animation-duration: Specifies how long the animation takes to run. Can be in seconds (s) or milliseconds (ms)
animation-timing-function: Describes the speed curve of the animation. The default here is "ease," but you can also set other values.
animation-delay: Specifies whether the animation waits to start.
animation-iteration-count: How many times the animation should play. The default is 1, but you can set any value, including infinite.
animation-direction: Specifies whether the animation should play forwards or in reverse.
animation-fill-mode: Describes whether the animation keeps the style values set by the first or last keyframe.
animation-play-state: Whether the animation is paused or running. This becomes important with animations you want to start and stop.
Once you get the hang of it, listing all those properties can get tedious. But don't worry, there's also a shorthand that can make writing complex animations a much more efficient process:
After understanding the order, combining all of these animation properties is simple. You don't need to change each value every time, but always make sure you specify the animation name and the duration or nothing will play.
Time to put things into action. Here are a couple of ideas for how you can use your new skills to get them to stick:
Feeling stuck? Here are a few outside resources that may provide more information...