Animation Using CSS3

Step 1 - Lets create a single box first

To begin with, we need some element that we can perform the animation upon. We will create a simple div with class box and add a style for it.

<style>
    .box {
      width:100px;
      height:30px;
      border:1px solid #B80000;
      background:#f5f5f5;
		  position:relative;
    }
  </style>

Step 2 - Single Property Animation

First, lets take a look at the simplest form of transition animation in CSS3. We are going to add hover option to the box and add transition style to animate width of the box.

We will use linear timing animation that lasts 0.2 of a second. Linear timing simply means that the animation is performed at the same speed, start to finish. It is the default, so it can be skipped.

<style>
    #box1 {
      -webkit-transition:width .2s linear;
      -moz-transition:width .2s linear;
      -o-transition:width .2s linear;
      transition:width .2s linear;
    }
    #box1:hover {
      width:200px;
    }
  </style>

Step 3 - animation timing and multiple properties

Now, lets try to add animation to few properties with different timing.

For this example I will increase the width and change the background color using different timing and timing animation.

<style>
    #box2 {
      -webkit-transition:width 1s ease-in, background 2s ease;
      -moz-transition:width 1s ease-in, background 2s ease;
      -o-transition:width 1s ease-in, background 2s ease;
      transition:width 1s ease-in, background 2s ease;
    }
    #box2:hover {
      width:200px;
      background:#444;
    }
  </style>

Step 4 - same animation for all properties

It makes sense to have different transitions for different properties if you are working on something custom and slow, but if you are planning to build a hover effect for some element that happens fast then the timing animation will not even matter, because it all happens so fast a human eye would not be able to register the difference. In this case you can use global CSS definition.

<style>
    #box3 {
      -webkit-transition:0.5s;
      -moz-transition:0.5s;
      -o-transition:0.5s;
      transition:0.5s;
    }
    #box3:hover {
      width:200px;
      height:60px;
      background:#444;
    }
  </style>

Step 5 - advanced techniques

If that wasn't enough, you can actually define your own animation. I will provide a small sample where your own amnimation is defined. Here's a little sample I built I called moveAround, which lasts 4 seconds, moves in uniform speed (linear) in an infinite loop that starts with a 1 second delay.

After that I define keyframes. Now, these do not have to be 0, 25, 50, 75 and 100. You can use any percentage you want, i.e. increase it by 10%, or even a random number up to 100%.

As you see posibilities are endless. You can rotate the elements or skew them. You can animate text, convert rectangles to ovals, you name it.

<style>
    #box4 {
      animation:moveAround 4s linear 1s infinite;
      -webkit-animation:moveAround 4s linear 1s infinite;
    }

    @keyframes moveAround
    {
      0%   { background:#f5f5f5; left:0px; top:0px; }
      25%  { background:#444444; left:200px; top:0px; }
      50%  { background:#f5f5f5; left:200px; top:60px; }
      75%  { background:#444444; left:0px; top:60px; }
      100% { background:#f5f5f5; left:0px; top:0px; }
    }

    @-webkit-keyframes moveAround
    {
      0%   { background:#f5f5f5; left:0px; top:0px; }
      25%  { background:#444444; left:200px; top:0px; }
      50%  { background:#f5f5f5; left:200px; top:60px; }
      75%  { background:#444444; left:0px; top:60px; }
      100% { background:#f5f5f5; left:0px; top:0px; }
    }
  </style>