Learn CSS Animation Effect – CSS3 Animations On Website

By Faruque Ahamed Mollick

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:

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.