Create Your First CSS Animation

CSS Animations ! Yeah you can really do some good looking animation stuff in CSS and the basics are pretty simple too. In this post I would be writing on how to do some basic animation using CSS. To get started with CSS animations you need to learn a little bit about CSS transforms. They are kinda simple too.

So CSS animations are made of keyframes. Keyframes are parts of the animations and they define the animation. There are two steps in creating some animation effect using CSS.

• Defining the CSS animation
• Assigning it to an HTML element

And so let us get started with the first step i.e. defining the CSS animation. And by the way in this post we will be creating an animation that moves an image from one end to another.

Defining CSS Animation :

And so to define a css animation we need to use the @-keyframes keyword and you need to use moz and webkit to make sure that it works on all webkit browsers and as well as firefox and in addition to this keyword you need to add a name to the animation. So type in the code below to create the keyframe :

@-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

And so that is it about defining the CSS Animation. You have now created the keyframes. And now you need to make it compatible with all those webkit browsers and firefox. It is really simple to do that. Just add the following lines of code and you could do it.

@-webkit-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);
} 

@-moz-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

It is better that you add these two pieces of code before the previous one. And now that you have completed with the keyframes stufff. It is now time to add the HTML code and associate this animation with the HTML image.

Assigning Animation To HTML Image :

Lets just add a simple image using HTML and add a class to it.

<img src = "image.jpg" class = "animation">

And now let us add the animation to the HTML element. Add the following code to the CSS file.

.animation {
animation-name: firstanim;
animation-duration: 2s;
animation-timing-function: ease-in;
}

The first two lines are self explanatory. The third line wont be clear if you are new to this. It just defines the type of animation that you would like it to happen. It can take 5 type of values. They are linear,ease,ease-in,ease-out,ease-in-out. You can just experiment these things if you want. And the last thing that you need to do is to just add the following code to the same class so that it supports webkit browsers and firefox.

-webkit-animation-name: firstanim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: firstanim;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in;

And so that is it for this tutorial on basic CSS Animation. You can just download the Source code from the above link and try the demo. Happy Animating :)

Tweet