CSS isn’t just for creating static web designs. You can create simple dynamic animations using CSS transitions. Things can move! Jump! Change colors! In this article, you’ll learn the basics so that you can get started using CSS transition
animations in your websites.
CSS transition
is aptly named: it helps transition from an initial visual state to another visual state.
That’s somewhat theoretical language, so let’s think about it using a metaphor.
Visual State
Imagine there’s a soccer ball ⚽ at your feet. It’s initially 0 ft from your feet. When you kick it, the next state is 100 ft away from you. How would we recreate this scenario in HTML/CSS?
Let’s tackle it!
index.html
<div class="soccerball" />
style.css
.soccerball {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #dddddd;
transform: translateX(0px); /* initial state */
}
.soccerball:active {
transform: translateX(100px); /* next state when active/clicked */
}
Clicking on the ball moves it 100px
to the right…
Hmmm… not quite right. The soccer ball just *zapped* over there. Let’s add the transition
rule!
style.css
.soccerball {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #dddddd;
transform: translateX(0px);
transition: transform 250ms linear; /* 💥 */
}
.soccerball:active {
transform: translateX(100px);
}
Let’s breakdown the parts in a transition
definition:
- CSS property can be anything! It can be
width
,background-color
,display
, etc. It specifies which property the transition should apply to. You can also use the keywordall
to target all the properties on the element. - Duration is the amount of time it needs to animate. The
ms
here means milliseconds. You can also use0.25s
to denote seconds. - Timing function is the speed of the change. It’s not quite the same as duration. To learn about timing-functions, see this in-depth guide from MDN. The available keywords are
ease
,ease-in
,ease-out
,ease-in-out
,linear
,step-start
andstep-end
. You can also define your own timing functions using cubic-bezier.
All in all, this transition
definition means div.soccerball
will take 250 milliseconds to move 100px along the X-axis. Try clicking on the ball!
That’s better!
This is the brilliance of CSS transition
! You simply give it two visual states, and it knows how to fill-in-the-blanks. In technical terms it can be said that transition
knows how to interpolate intermediate values between two fixed values (0px and 100px).
CSS transition
is one of those suprisingly intelligent 🧠 aspects of CSS that makes me feel blessed to have such a simple/powerful tool!
Transitioning Multiple CSS Properties
With transition
you can even define multiple properties by separating each property with a comma:
.soccerball {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #dddddd;
transform: translateX(0px) scale(1);
transition: transform 250ms linear, background-color 500ms linear; /* 👈 comma! */
}
.soccerball:active {
background-color: white;
transform: translateX(100px) scale(2);
}
Now, clicking div.soccerball
animates several of its CSS properties. And, as you can see, even colors can be transitionned from one to another:
CSS transitions have been around since 2012 so browser support is solid! ✊
Conclusion
The Web is a much more captivating place with animations! Try using CSS transition
and you’ll find that they can really boost the overall user experience of your website.
Once you’re comfortable with the concepts and usage of transitions in CSS, you can then move on and learn about animations using the @keyframes at-rule.
View documentation for the CSS transition
property on MDN