CSS3 Animation

The CSS3 Animation Module goes beyond what one can do with CSS3 Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process of creating animations is very different. First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

Key Frames

Ok, so the very first step in creating animations is to define your key frames.

A key frame is a point that defines the start and end of a transition. The most simple animation will have two key frames – one at the start and one at the end- whereas more complex ones will have multiple key frames in between.

In CSS, key frames are declared in the @keyframes rule, which has the following syntax

@keyframes 'name' {
        &keyframe {
                  property: value;
       }
}

The first value for the @keyframe is name; this unique identifier is use to call the animation. The next value, keyframe, sets the position along the duration of the animation that the keyframe will occur. The possible values are percentages or one of the keywords from or to. You must specify at least two key frames (from/0% or to/100%), but you can as many as you like as long as each has unique position in the animation.

Animation Properties

Once you’ve defined the key frames, the next step is to add the controls to the elements you want to animate. The available animation properties are listed below

Name

The animation-name property is used to refer to an animation that’s been defined with the @key-frames rule.

E { animation-name : name; }
Duration

The duration of an animation is set by animation-duration property, which defines the length of time that the animation takes to complete.The syntax for this is

E { animation-duration : time; }

The time value is a number with a unit of either ms or s, or 0 (zero), which prevents the animation from running. Negative values are also implemented as 0

Timing Function

To control the manner in which an element animate between states we use the animation-timing-function property. This allows for variations in speed along the duration of animation, which gives you control over the animation’s pace. The property has two different value types: a keyword or the cubic-bezier function. The syntax for this property is

E { animation-timing-function : keyword; }

The possible values for keyword are ease, linear, ease-in, ease-out and ease-in-out. The default value is ease.

Delay

One can set delay for the animation by setting the animation-delay property. The syntax for this property is

E { animation-delay: time }

Like animation-duration, the time value is a number with a unit of ms or s, which sets the delay before an animation begins. A 0 (zero) means no delay. The negative value causes the animation to “skip” by that amount.

Iteration Count

The number of animation can be repeated any number of times by setting the animation-iteration-count property, which has this syntax

E { animation-iteration-count : count; }

The count value in this syntax is either a whole number or the keyword infinite. A number value sets how many times the animation repeats. The default value is 1 (one). The infinite value means the animation loops indefinitely, or at least until another condition is met that changes this vale. A value of 0 (zero) or any negative value prevents the animations from playing

Direction

Animations play from start to finish, but they can also play in reverse. You can set whether you animation always plays in one direction or alternates playing forward and backward. To do this, you can use the animation-direction property:

E { animation-direction: keyword; }

The keyword value has two options: normal or alternate. The default is normal, which always plays the animation forward.

Shorthand

You can use shorthand property animation to declare each of above mentioned property for an animation. The syntax is

E { animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; }

Animation In Action

Animation: Browser Support


Source

a) The Book of CSS3: A Developer’s Guide to the Future of Web Design

b) Animation Module – w3.org