CSS Animations
📣 Sponsor
We've spoken about CSS transitions, but animations are slightly different. Animations can be independent of state or class changes, so we can have an animation start immediately. We also have control over direction, and a granular level of control over keyframes.
We will also introduce a new syntax in this article, which is the @
syntax used in CSS.
The animation tag
The animation tag looks a lot like the transition tag we previously covered. There is a single tag which is a shorthand for a number of other tags. The syntax looks like this:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-iteration-count] [animation-fill-mode] [animation-delay] [animation-direction] [animation-play-state]
As you might expect, we don't need all of these properties, and in fact most implementations only use animation-name
, animation-timing-function
and animation-duration
.
div {
animation: myAnimation 1s linear infinite forwards 0.5s normal running;
/* This can be separated out as separate properties.. i.e. */
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 0.5s;
animation-direction: normal;
animation-play-state: playing;
}
A typical implementation using less properties:
div {
animation: myAnimation 1s linear infinite forwards;
}
What do each of the tags mean?
animation-name
- the name of the animation we'll play - we'll get to this in a moment.animation-duration
- how long the animation should be, usually in seconds, i.e. 2sanimation-timing-function
- a keyword or curve for the timing function. It is usually ease, linear, ease-in, ease-out or ease-in-out.animation-iteration-count
- the number of times we'll run the animation. Can be any number, or infinite.animation-fill-mode
- the final state of the animation. If forwards the animation finishes on the last frame. The opposite is true for backwards.animation-delay
- the delay before the animation starts, usually in seconds, i.e. 2sanimation-direction
- whether the animation goes from start to finish, or from finish to start. Can be normal for forwards, reverse for backwards, alternate for going forward and back over and over, or alternate-reverse for going back and forward over and over.animation-play-state
- if the animation is playing or not. It is running by default, but can be set to paused.
Animation Name
As we saw, we used animation-name
to reference a specific animation name. Where does that come from? Well, we define that as part of our keyframes. We use @
to determine keyframes.
We first call @keyframes
followed by the name of our animation. We can then call keyframes using percentages, i.e. 0% is at the start of the animation, and 100% is at the end:
div {
animation: myAnimation 1s linear infinite forwards alternate;
position: relative;
width: 150px;
height: 150px;
background: orange;
border-radius: 1000px;
}
@keyframes myAnimation {
0% {
left: 0px;
}
20% {
left: -20px;
}
40% {
left: 0px;
}
100% {
left: 200px;
}
}
How that looks:
Fill Mode
Fill mode is a property which can seem confusing, but it's rather straight forward (pardon the pun). If set to forwards, the last keyframe is used, but if it's set to backwards (the default), the animation will end on the first frame.
Hover over these examples:
As you can see, on hovering over this example, the forwards example ends on the last frame, while the backwards animation ends on the first frame.
To and from
If your animation is a little simpler, you can also use to and from rather than percentages. Here, from refers to 0%, and to refers to 100%:
@keyframes myAnimation {
from {
left: 0;
}
to {
left: 200px;
}
}
Timing Functions
Timing functions here are exactly the same as in transitions. So we can replace animation-timing-function
with any of those. If you need reference to these, please see our Transitions Guide
More Tips and Tricks for CSS
- How to disable text selection in CSS
- Smooth CSS Gradient Transitions
- CSS Inset Borders at Varying Depths
- Centering Elements in CSS with Tailwind
- Updating CSS Variables with Javascript
- CSS Units
- The Quick Guide to Dark Mode
- Using Only CSS to Recreate Windows 98
- How to vertically center text and HTML elements with CSS
- How to do Deletion Animations with CSS