Web Design/CSS3 Animations

Completion status: this resource is just getting off the ground. Please feel welcome to help!

One of the most exciting new features of CSS3 is the ability to animate almost any CSS property without having to appeal to Javascript. There are mainly to ways of doing CSS3 animations : using the transition property or using the @keyframes

The transition property

The basics

This is the most easy and the most used way of doing CSS3 animations. With the transition property, you just have to specify the property you want to animate and the duration of the animation. As this property may not be fully supported by old web browsers, you may want to add the -moz-, -webkit- or -o- prefixes. For example:

transition: background-color 3s;
-moz-transition: background-color 3s;
-webkit-transition: background-color 3s;
-o-transition: background-color 3s;

In this example, if the element changes of background-color there will be a nice transition of 3s between the two colors. In the next examples, I won't add the prefixed line, it's up to you if you want to add them. If you want to, you can use different property to define a transition:

transition-property: background-color;
transition-duration: 3s;

A more practical example for CSS transitions:

a {
  color: #001F3F;
  transition: color .3s;
}

a:hover {
  color: #0074D9;
}

This code will make a transition from a dark blue to a lighter blue in 0.3 seconds any time you hover a link, a make the transition back to the dark blue any time the mouse leave the element.

Transitions are not limited to one property: we can specify transitions for multiple properties in one line and with different durations:

transition: color .3s, background-color .5s, height 2s, opacity 10s; /* And so on… */

And with separated properties:

transition-property: color, background-color, height, opacity;
transition-duration: .3s, .5s, 2s, 10s;

Delays

Another feature of CSS3 transitions is that we can specify a delay before the animation is triggered. Example:

a {
  color: #001F3F;
  background-color: #0074D9;
  transition: background-color .5s 0s, color .3s .5s;
}

a:hover {
  background-color: #001F3F;
  color: #0074D9;
}

The example above will first change the background color of the link when the mouse hover the element with a duration of 500 milliseconds and then after the 500 milliseconds, the color property will be animated with a duration of 300 milliseconds. And this is the same when the mouse leave the element.

As usual, you can still use separated property to defined a delayed transition:

transition: background-color, color;
transition-duration: .5s, .2s;
transition-delay: 0s, .5s;

Timing functions

That's still not all with the transition property: when can still add a transition timing function.

What is a timing function ?

A transition timing function is a function which can define at what time what intermediate state will be displayed. For example, in a linear transition from a height of 200px to a height of 400 px and with a duration of 2 seconds, at t = 1 second, the height will be at 300px. That is not the case with an ease timing function which accelerate more sharply at the beginning and slow down more at the end.

CSS3 Timing functions

The CSS3 defined several timing functions that are reusable through keywords:

linear timing function	ease timing function	ease-in timing function	ease-out timing function
ease-in-out timing function	step-start timing function	step-end timing function

One can also defined it's own timing function using either the cubic-bezier() function or the steps() function.

Using cubic-bezier(x1, y1, x2, y2) means that we create a Bezier Curve with 2 anchors which coordinates are (x₁, y₁) and (x₂, y₂) with x and y between 0 and 1. You can of course use external tools like this one to create your own Bezier curves.

The steps() function creates another type of customized "curve". There is two possibilities: steps(x,start) or steps(x,stop). x is the number of steps you want in your "curve". If start is set then when the animation starts the initial state instantly disappear while when end is set then when the animation starts the initial state is held a little while while the final state is displayed if and only if the transition is finished.

Usage

The usage, as usual is very simple:

transition: color .2s cubic-bezier(0,1,1,0) 3s, background-color .3s steps(7, start) 0s, opacity 1s ease-in-out 0s;

And as always, you can use separate transition properties:

transition-property: color, background-color, opacity;
transition-duration: .2s, .3s, 1s;
transition-timing-function: cubic-bezier(0,1,1,0), steps(7, start), ease-in-out;
transition-delay: 3s, 0s, 0s;

Using @keyframes

The concept

In CSS3, the @keyframes at-rule is used to define a series of transitions at different times of the animation. The syntax is:

@-moz-keyframes your-animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes your-animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes your-animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes your-animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

For example, we can define that from 0% to 20% of the duration the color goes from #ABCDEF to #012345 and then the opacity goes from 0.5 to 1 until the end. As usual, I will skip the prefixes for the next examples. This will give:

@keyframes awesome-animation {
  0% {
    color: #ABCDEF;
    opacity: 0.5;
  }
  20% {
    color: #012345;
    opacity: 0.5;
  }
  100% {
    color: #012345;
    opacity: 1;
  }
}

Then, in order to activate this animation for a given element, we have to write:

span {
  animation: awesome-animation 3s;
}
/* Or */
div {
  animation-name: awesome-animation;
  animation-duration: 3s;
}

Please note that defining opacity: 0.5; at t = 0% is different from not defining it. If we don't define it, then from 0% to 20%, the opacity property will animated from the default value or from the element's defined value in the CSS code.

For the animations which have 0% and 100% only or 0% only or 100% only, we can replace 0% by from and 100% by to. Example:

@keyframes good-ol-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* As opacity's default value is 1, we can simply write : */
@keyframes good-ol-animation {
  to {
    opacity: 0;
  }
}

Animation options

Like the transition property, the animation property have several options that may be useful.

Timing function and delay

Like the transition property, we can specify a timing function and a delay. Here's an example:

a {
  animation: another-awesome-animation 3s ease-in-out 5s;
}
/* Or */
a {
  animation-name: another-awesome-animation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
}

Iterations

Another useful option that the animation property have is the iteration count option: we can specify how many times we want the animation to be repeated. It can be an integer, infinite or a decimal number. The syntax is:

a {
  animation: another-awesome-animation 3s ease 0s 2.5;
}
/* Or */
a {
  animation-name: another-awesome-animation;
  animation-duration: 3s;
  animation-iteration-count: 2.5; /* or infinite if you want */
}

The example above will do the another-awesome-animation animation twice and will start another one and stop at the half of it.

Direction

One thing we can do with the animations is that we can specify in which direction will the animation be played. You have the choice between normal, reverse, alternate and alternate-reverse. You have to combine alternate and alternate-reverse with the animation-iteration-count property in order to see a difference compared to normal and reverse. Here's how it works:

a {
  animation: legendary-animation 3s ease 0s infinite alternate;
}
/* Or */
a {
  animation-name: legendary-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

With this example, the a element will do the legendary-animation from 0% to 100% and then from 100% to 0% indefinitely.

Fill mode

The fill modes in CSS3 animation allows we to configure we do the element do before and after the animation. We have 4 choices : none, backwards, forwards and both. Specifying backwards means that before the animation (during the delay) the properties defined in the beginning of the animation overwrite the properties of the element. forwards means that at the end of the animation, all the properties defined in the end of the animation overwrite the properties of the element. both means both and none means none.

a {
  animation: do-the-flop 3s ease 0s 1 normal forwards;
}
/* Or */
a {
  animation-name: do-the-flop;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Play state

An easy way to control your CSS3 animation is using the play state option. For example: if we want to create an animation that rotate an element we the mouse is over and stop the rotation when the mouse leave. At first, we would do this:

@keyframes rotation-animation {
  to {
    transform: rotate(1turn);
  }
}

div:hover {
  animation: rotation-animation 3s;
}

But that is not correct. Why ? because when the mouse leave, the element's rotation don't just only stop but reset itself. And so we will have to use the play state property to do this properly. In the animation-play-state property, there is of course two options: running and paused. Here's the correct code of the example:

@keyframes rotation-animation {
  to {
    transform: rotate(1turn);
  }
}

div {
  animation: rotation-animation 3s;
  animation-play-state: paused; /* animation-play-state is used with a separate property only */
}
div:hover {
  animation-play-state: running;
}

Like the other property, we can define multiple running state for an element which have multiple animations:

animation: awesome-animation 3s, another-awesome-animation 1s, legendary-animation 9000s;
animation-play-state: running, paused, running;