Back to Basics: CSS Transitions for Simple Animations

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 keyword all 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 use 0.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 and step-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