CSS3 Animations

Last updated on March 27, 2015
Author: ciphertrick

Last updated on March 27, 2015
Author: ciphertrick

In CSS3 animations we can easily create basic animation without using any flash or JavaScript.

Like an element moving from one position to another with effects.

Table of Contents

@keyframes Rule

While creating animation we required @keyframes.

We need to add CSS style to @keyframes rule so that animation will work from one style to another.

Animation property

Animation created in @keyframes rule. also need to bind it to selector.

For binding selector need to specify 2 properties.

Name of the animation
Duration of the animation

See css code below.

CSS

div {
    -webkit-animation: testanimate 10s; /* Chrome, Safari, Opera */
    animation: testanimate 10s;
}
@keyframes testanimate { /* Standard syntax */
    from {background: #1FA67A;}
    to {background: #000000;}
}
@-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
    from {background: #1FA67A;}
    to {background: #000000;}
}

We can also change style based on the percent of the animation completed (ex: at 25%, at 55%, etc.).

See below example changing animation based on percentage.

CSS

@keyframes testanimate { /* Standard syntax */
    0%   {background: green;}
    35%  {background: blue;}
    55%  {background: red;}
    95% {background: yellow;}
}
@-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
    0%   {background: green;}
    35%  {background: blue;}
    55%  {background: red;}
    95% {background: yellow;}
}

Animation with its properties

CSS3 Animations properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state.

CSS

div {
    /* Standard syntax */
    animation-name: testanimate;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* For Chrome, Safari, Opera */
    -webkit-animation-name: testanimate;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

Full HTML & CSS Code

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.animate {
                -webkit-animation: testanimate 10s; /* Chrome, Safari, Opera */
                animation: testanimate 10s;
            }
            @keyframes testanimate { /* Standard syntax */
                from {background: #1FA67A;}
                to {background: #000000;}
            }
            @-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
                from {background: #1FA67A;}
                to {background: #000000;}
            }
        </style>
    </head>
    <body>
        <div class="animate"></div>
        <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    </body>
</html>

Note: This example does not work in Internet Explorer 9 and earlier versions.