Understanding the CSS Animation

Hola!

I hope you are creating beautiful things…

Yesterday I was going through one article, it taught me how to apply css animations on HTML pages. CSS animation gives us way to beautify the site with simple animations without relying on javascript or flash! Isn’t it beautiful, you don’t need any extra technology to make your page interactively animated.

Let us first understand how CSS animation works!

A CSS animation causes an element to gradually change from one style to another. We can change as many style properties as we want and as many times, even infinitely. In order to define animations we must first specify the frames, i.e., the rate at which a particular property will change followed by next event. It is like laying out plan frame by frame.

We need to keep in mind some attributes:

  • animation-duration: It marks the one loop duration. Then each keyframe will take this much time to complete.
  • @keyframes: It specifies how the property will change, what property will change and when it will change.

Both attributes are independent of each other. One can delay or fast keyframe on the basis of animation-duration.

Now let’s see the example:

/* The animation code */ 
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;} }
/*The element to apply the animation to */ 
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s; }

Now, the above snippet means that the background color of the div will animate for 4s and then loop back again.

Within that 4s, first it will change to red, then to yellow, then blue, then green and go on like this in a looped matter. In keyframes part you can alter any css property based on time.

The animation feature has following options:

  • animation-delay: 2s : this when added to, will delay the animation by that much time before starting it.
  • animation-iteration-count: 3 : specifies how many times the animation will loop. If entered infinite, it will loop infinitely.
  • animation-direction: reverse : used to let an animation run in reverse direction or alternate cycles.
  • animation-direction: alternate : to make the animation first run forward, then backward, then forward
  • animation-timing-function: specifies the speed curve of the animation. Possible values are: ease, linear, ease-in, ease-out, etc.

All these property can be summed up together and written in two ways like following:

div { 
animation-name: example;
animation-duration: 5s;
animation-timing-function:
linear; animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate; }

or in shorthand like:

div { 
animation: example 5s linear 2s infinite alternate;
}

Following one tutorial, I tried making a simple animation where the car moves in a scene. You can check out the demo here:

and you can visit my github repository for the code behind it.

The basic concept which I used here is the linear movement using the css property translate(). For example, one of the keyframe of wheel of the car is:

@keyframes MoveCar
{
0%{background-position: 0px 0px;}
100%{background-position: -1000px 0px;}
}

Happy creation…Isn’t it simple! Just the basic keyframes when mixed together can create beautiful animations. I have applied linear translate animation to wheels and changed the animated the background position of the body image in opposite direction of wheel movement so as to portray that the Car is moving. This is a simple and first step towards animation using CSS. I hope you will create better and beautiful animations..