menu
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:
<style type="text/css">

  #cloud-area{

  position:relative;

  height:500px; 

  width:650px; 

  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

  }


div.hanuman{

  position:absolute;

  bottom:10px;

  left:20px;

  -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

  }


#cloud-area:hover{

  background-position:-50% bottom

  }


#cloud-area:hover div.hanuman{

  -webkit-transform:translate(500px,-250px);

  -moz-transform:translate(450px,-250px);

  -o-transform:translate(500px,-250px);

  -ms-transform:translate(500px,-250px);

  }


</style>




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


RESULT:

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:

No comments:

Post a Comment

Books for you (Crafted with )