CSS/CSS3 Tutorial: Animating the Web Page Experience

Hello Friends! All of you guys know that movies are nothing but continuously changing image frames and many times while converting any video you might have specified FPS. I am here gonna talk about animations in web pages.

The latest Cascaded Style Sheet standard i.e. CSS3 has something for this. CSS3 provides some handy attributes to make and control the animations on web page. Here is the list of attributes available for this.

1. @keyframes: It specifies the complete animation. What changes to be made on properties at qny stage of single animation loop.

2. animation: It specifies the various aspects of animation that how it should be performed. It may accept single value or may accept multiple values that are listed below.

3. animation-name: It specifies the name of the keyframe which you want to use for the animation.

4. animation-duration: It specifies the time period for which the single iteration of the animation should play.

5. animation-delay: It specifies the time for which animation has to wait to start.

6. animation-timing-function: It specifies the speed curve of the animation i.e. while playing the speed variations that should be made on its various states.

7. animation-iteration-count: It specifies the count for how many times the animation has to be played.

8. animation-direction: It specifies whether the animation should be played in reverse on the alternate iterations on animation.

9. *animation-play-state: *It specifies play state of animation i.e. the animation is paused or running. This property is currently not supported but is in the specification of CSS3 standard.

Now lets use above properties to have some fun with animation I am creating a span element and then perform some animation on it. But for this time I am only writing code for webkit Browsers and and Firefox and its Derivative Browsers.

<span class="target"><span></span></span>

And following is the CSS applied to HTML element:

@keyframes myfirst {
  0% { left:50px; }
  100% { left:400px; }
}

@-moz-keyframes myfirst {/* Firefox */
  0% { left:50px; }
  100% { left:400px; }
}

@-webkit-keyframes myfirst{ /* Safari and Chrome */
  0% { left:50px;}  
  100% { left:400px; }
}
.target {
  position: relative;
  animation-name: myfirst;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  /* Firefox: */
  -moz-animation-name: myfirst;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-delay: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-play-state: running;
  /* Safari and Chrome: */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

You can see the Demo/Example of above animation Here

Demo Download

Go on and play with this and share your views about this tutorial in comments.