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:
- Define the CSS property to transition
- Defines how long to take to complete the transition in seconds (ex. 1s)
- Defines the style of transition (default is ‘ease’)
- 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!