All CSS3
Inaam  

CSS3 Animations

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>

 

4 thoughts on “CSS3 Animations

  1. venu

    its not working…in my latest chrome..

    1. Inaam Hussain

      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

    1. Inaam Hussain

      Ok ya sure.
      Thanks.

Leave A Comment