Skip to content

Transitioning CSS: A basic introduction to CSS transitions

So you’ve heard you can animate with CSS3. Yes, the rumors are true. But look for any tutorials online, and you’ll get a treatise, 3D transforms, and lots of things that you might not want if you want the absolute basics. That’s why we’re here.

What’s a CSS Transition?

This is the part where I quote the W3C, so bear with me: 

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

That’s clear enough, right? (kidding, it’s still W3C speak) What they’re saying is by assigning a css transition, specifying a particular property, when that property changes because of various changes on the page, it will transition smoothly, over a defined time, rather than changing rapidly.

.thing {
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  transition: width 1s;
  width: 50px; 
  height: 200px;
  border: 1px solid #000;
} 
.thing:hover {   
  width: 200px 
}

Check this out in action. Now check out this version, where we have a few of those divs. It creates the effect of an accordion, n’est-ce pas? Pretty neat.

Let’s break down what’s happening: 

transition is a short-hand property that includes transition-property, transition-duration, transition-timing-function, and transition-delay. In order they: 

  1. Define the CSS property to transition
  2. Defines how long to take to complete the transition in seconds (ex. 1s)
  3. Defines the style of transition (default is ‘ease’)
  4. Define how long to wait before starting the transition

In that vein, we can see that

transition: width 1s;

is in fact:

transition-property: width;
transition-duration: 1s;

Sure enough, we can see that modifying the declaration to say this has the same results as earlier. The animation defaults to ease, and the delay defaults to 0. I suspect the most confusing property might be transition-timing-function, so here’s the docs. It gets math-y in there, so there’s that if you’re interested, or try playing with it in JSFiddle to see what happens when you change the value.

To add more than one animation, use comma-separated values. Enjoy!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.