Ad goes here

Saturday, 26 January 2013

CSS3 Animation

Many web developers and designers are attracted with the power of CSS3, as we have discussed in my previous post. Today I will discuss about the power of CSS3 on animation.

If you have a basic knowledge on CSS and HTML then it’s really very easy to do a small animation.

We will create a small animation with HTML5 and CSS3 that will help you to create new animation on different story or theme and hope you will enjoy it.

  • Find out a cloud image from Google or you can design a cloud image as I design/ developed in this tutorial.
  • Download a Hanuman or Bird image from online or you can design anything suitable on cloud background.
  •  Create a HTML5 document and use below codes.

<style type="text/css">





  background:#0c0440 url(cloud.jpg);

  background-position:left bottom;

  -webkit-transition:all 3s ease-in;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -ms-transition:all 3s ease-in;color:#fff






  -webkit-transition:-webkit-transform 3s ease-in;

  -moz-transition:-moz-transform 3s ease-in;

  -o-transition:-o-transform 3s ease-in

  ;-ms-transition:-ms-transform 3s ease-in


div.hanuman img{

  -webkit-transition:all 2s ease-in-out;

  -moz-transition:all 2s ease-in-out;

  -o-transition:all 2s ease-in-out;

  -ms-transition:all 2s ease-in-out



  background-position:-50% bottom


#cloud-area:hover div.hanuman{







<div id="cloud-area">
<div class="hanuman">
<img src="hanuman.png"
width="190" height="248"
alt="" /></div>


Please mouse hover on below cloud image to view animation.
Note: To veiw this result/animation, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

You can download images below to try this animation:

1 comment:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai