Learn CSS Animation Effect – CSS3 Animations On Website

By informerfrk

You will see CSS animation effect on many websites and web templates. It is not so hard to create animation effect using CSS. CSS animation effect actually introduced from CSS3. In this tutorial I am going to tell you how to create animation effect using CSS.

How to create animation effect using CSS code?

Using CSS you can create nice animation effect. Before starting the tutorial you have to know about CSS3 @keyframes.

Understanding CSS3 @keyframes

The @keyframes rule specifies the animation code and the main purpose of it is to create animation or giving animation to a CSS element. The animation is created using @keyframes rule by gradually changing from one set of CSS styles to another. You can add two or more than two CSS set inside a @keyframes.

CSS3 animation tutorial using @keyframes rule

You need to give a name for your @keyframes. Here is the standard code structure of CSS3 keyframes rule:

@keyframes myrule {
    from {top: 0px;}
    to {top: 300px;}
}

The above code is for moving the element from 0px top to 300px bottom. The above code is not supported by firefox, safari and opera. So here is the code to make the animation effect supported for all these browsers and also for chrome:

/* Standard @keyframes rule code*/
@keyframes myrule {
    from {top: 0px;}
    to {top: 300px;}
}

/* Supported by Safari 4.0 - 8.0, Opera  15.0*/
@-webkit-keyframes myrule {
    from {top: 0px;}
    to {top: 300px;}
}

/*Supported by Firefox */
@-moz-keyframes myrule {
    from {top: 0px;}
    to {top: 300px;}
}

/* Supported by opera 12.0*/
@-o-keyframes myrule {
    from {top: 0px;}
    to {top: 300px;}
}

 

Now you have to add this @keyframes rule for a div element. Here is the CSS code to add this rules inside a div element:

.testanimation {
    height: 85px;
    width: 85px;
    background: green;
    position :relative;
    -webkit-animation: myrule 7s infinite; /* For Safari 4.0 - 8.0 */
    animation: myrule 7s infinite;
}

You can see that the above code animation has infinite property. if you remove it than the animation will be stop after completing it’s one cycle.

After that add the HTML code

<div class="testanimation"></div>

That’s all you need to do. Now test it in your chrome browser and you can see that the green block moving from top to bottom. With this same process you can create animation effect that come from your mind. In the next part  I will show you tutorial that has more than two set of CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *