Web Design/CSS3 Animations

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  property or using the

The basics
This is the most easy and the most used way of doing CSS3 animations. With the  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,   or   prefixes. For example: 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:

A more practical example for CSS transitions: 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:

And with separated properties:

Delays
Another feature of CSS3 transitions is that we can specify a delay before the animation is triggered. Example: 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:

Timing functions
That's still not all with the  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:

One can also defined it's own timing function using either the  function or the   function.

Using  means that we create a Bezier Curve with 2 anchors which coordinates are (x1, y1) and (x2, y2) 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  function creates another type of customized "curve". There is two possibilities:  or. x is the number of steps you want in your "curve". If  is set then when the animation starts the initial state instantly disappear while when   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:

And as always, you can use separate transition properties:

The concept
In CSS3, the  at-rule is used to define a series of transitions at different times of the animation. The syntax is: 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: Then, in order to activate this animation for a given element, we have to write: Please note that defining  at t = 0% is different from not defining it. If we don't define it, then from 0% to 20%, the  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  and 100% by. Example:

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

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

Iterations
Another useful option that the  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,  or a decimal number. The syntax is: The example above will do the  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,  ,   and. You have to combine  and   with the   property in order to see a difference compared to   and. Here's how it works: With this example, the  element will do the   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 :,  ,   and. Specifying  means that before the animation (during the delay) the properties defined in the beginning of the animation overwrite the properties of the element. means that at the end of the animation, all the properties defined in the end of the animation overwrite the properties of the element. means both and  means none.

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: 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  property, there is of course two options:   and. Here's the correct code of the example: Like the other property, we can define multiple running state for an element which have multiple animations: