CSS Introduction | CSS3 Transforms | Animation

Animation

In CSS3, you can use the animation property to gradually change an element’s current style into another style. In CSS2, external plugins such as JavaScript or Flash had to be used to express these effects. In CSS3, animation effects can be applied easily.

CSS3 Animation Support Versions

The major web browser versions that support CSS3 animations are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

@keyframes Rule

To use animation effects in CSS3, you must first define keyframes for the animation. A keyframe specifies the CSS style that the element should have at a particular time.

When CSS styles are set inside the @keyframes rule like this, the element’s style gradually changes from the current style to the newly set style by a specific time.

For the animation effect to work, you must first connect the element and keyframes by using the animation-name property.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;
    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

In the example above, the from keyword specifies the initial style, and the to keyword specifies the final style.

However, to express more complex animation effects, you can use percentages (%) instead of the from and to keywords. Specify the initial style at 0%, the final style at 100%, and create as many intermediate keyframes as needed.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    @-webkit-keyframes movingPara {
        0% { border-color: red; }
        20% { border-color: orange; }
        40% { border-color: yellow; }
        50% { border-color: green; }
        60% { border-color: blue; }
        80% { border-color: navy; }
        100% { border-color: purple; }
    }
</style>

When an animation effect finishes playing, the element returns to the style it originally had.

animation-duration Property

The animation-duration property sets how long the animation effect plays. The default playback time is 0 seconds, so if you do not specify a playback time, no effect will appear.

animation-delay Property

The animation-delay property sets the delay before the animation effect appears. The animation effect starts only after the time set by this property value has passed.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        -webkit-animation-delay: 2s;
        animation-name: movingPara;
        animation-duration: 4s;
        animation-delay: 2s;
    }
</style>

animation-iteration-count Property

The animation-iteration-count property sets how many times the animation effect repeats. If this property value is set to infinite, the animation effect repeats indefinitely.

<style>
    #one, #loop {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    #one {
        -webkit-animation-iteration-count: 2;
        animation-iteration-count: 2;
    }
    #loop {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
</style>

animation-direction Property

The animation-direction property sets the direction in which the animation progresses. The values reverse and alternate can be used to indicate the direction.

The reverse value changes the progress direction of the animation effect to the opposite of the original direction. In other words, the animation effect progresses from to to from, rather than from from to to.

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        animation-name: movingPara;
        animation-duration: 2s;
    }
    #backward {
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }
</style>

The alternate value changes the progress direction of the animation effect each time the animation repeats. In other words, after the animation effect progresses once from from to to, it changes so the next run progresses from to to from. In this way, the animation repeats alternately for the total number of iterations.

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 4;
        animation-name: movingPara;
        animation-duration: 2s;
        animation-iteration-count: 4;
    }
    #backward {
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
</style>

animation-timing-function Property

The animation-timing-function property sets the speed of the animation effect over time.

The animation-timing-function property can use the following values.

1. linear : The animation effect progresses at a constant speed from beginning to end.
2. ease : The default value. The animation effect starts slowly, then becomes faster, and slows down again at the end.
3. ease-in : The animation effect starts slowly.
4. ease-out : The animation effect ends slowly.
5. ease-in-out : The animation effect starts slowly and ends slowly.
6. cubic-bezier(n,n,n,n) : The animation effect progresses according to a user-defined cubic-bezier function.

<style>
    div {
        -webkit-animation: timingFunc 4s 3;
        animation: timingFunc 4s 3;
    }
    #div_01 {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    #div_05 {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    @keyframes timingFunc {
        from { left: 0px; }
        to { left: 300px; }
    }
</style>

Animation Shorthand

You can set styles using all animation properties in one line.

<style>
    div {
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: alternate;
    }
</style>

The same animation effect as the example above can be expressed as follows.

Syntax

div { animation: myShorthand 3s ease-in-out 1s 3 alternate; }

<style>
    #long {
        -webkit-animation-name: myShorthand;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-direction: reverse;
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: reverse;
    }
    #short {
        -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
        animation: myShorthand 3s ease-in-out 1s 3 reverse;
    }
</style>

CSS3 animation Properties