A quick introduction to CSS animations
In this article you’ll learn the basics CSS animations, which allows you to gradually change an element’s style from one state to another.
As you read through the article and get familiar with the concepts, I’d recommend you to check out this interactive Scrimba screencast below, where you’ll be able to play around with the code yourself. Try experimenting with the animation yourself, so that you’ll properly grasp how the technology works.
Now let’s get started!
Creating the keyframes
The first thing we need to do is to create a
@keyframes rule. This is where you specify how your animation will play out from beginning to end.
Let’s create an animation called
test, we’re using percentages to represent the steps in our animation. 0% represents the beginning of the animation and 100% represents the end.
We also need specify what kind of state we want our element to be in at each given point in the animation. In this case, we’re simply flipping
background-color. It will be changed to
blue, and CSS will take care of creating smooth transitions between the colors.
Note: we could also have used
toinstead of percentages. However, percentages gives us much more flexibility.
Applying it to an element
This animation can used by any element on the page. We’re going to use it on the
div tag with the id of
myDiv, which we’ve styled as a small red square.
myDiv use our animation, we set its
animation-name property to
test, like this:
As you can see we also give it
animation-duration of 4 seconds. This will result in the following happening:
There are eight different animation properties in CSS, all of which can customize your animation in various ways:
Note: the CSS
animationproperty is a shorthand property the eight properties above, meaning you could write it all in one line if you wanted. However, in this articles, we’ll use them separately.
If we for example want our animation to repeat twice and also delay two seconds before kicking off, we’ll do the following:
The final concept we’re going to learn is easing. Easing is used to make an animation look more natural by adjusting the speed throughout the animation. You’ll immediately notice if an animation lacks easing, and rather moves linearly from start to end, as your brain is used to seeing things move with easing in nature.
To specify the easing we want, we’ll use the
animation-timing-function property. Here are some of the values it can take:
- ease (default)
To make is easier to see how easing works, we’ll animate the width instead of the color of
#myDiv. So we’ll change the
test keyframe to the following:
And we’ll set
As we’re not specifying the easing, it’ll use the
ease value by default, which makes the animation look natural.
If you look closely, you’ll notices that it eases in and out in both steps of the animation, both from 0% to 50% and from 50% to 100%.
In each step, it starts off slow, then speeds up, before it slows down again towards the end.
Note: it’s the gifs that makes these animations look choppy. In the browser, it’ll the frame rate is much better.
Now let’s set the
linear to make it apparent how important easing is:
As you can see, this feels a bit less natural. The two steps have been merged into one, as the div is growing with the same speed throughout the entire animation.
Now that we’ve gone through the basic theory, I’d recommend you to play around with the code in the Scrimba screencast that was embedded to the top of this article (alternatively, check it out here).
Try to edit and run the code, so that you get an understanding of how your changes affects the animation.
God luck, and happy coding!
Thanks for reading! I’m Per, co-founder of Scrimba, a tool to create interactive coding screencasts. Be sure to check it out if you’re interested in learning more about web development.