CSS3 Animations

March 27, 2015
by Inaam Hussain

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

Like element moving from one position to another with effects.

@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.

  1. Name of the animation
  2. 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 percent of 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 it’s 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

HTML & CSS
<!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>

 

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

4 comments

  1. |

    its not working…in my latest chrome..

    • |

      It should work. can you describe more on your problem so that i can resolve your problem.

  2. kucix
    |

    empty div has height=0, just add some height to it

Leave a Comment