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:

25 comments:

  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

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

    ReplyDelete
  3. I visited a lot of website but I conceive this one contains something special in it in it nyc web designer

    ReplyDelete
  4. Chaga mushroom coffee been recently brought to plenty of everything about simply because of the Ukrainian article author Alexandr Solzhenitsyn by it’s new ‘Cancer Ward’ in which traditional qualities is generally cured of a tumors on the help consume. Siberian Chaga website designer nyc

    ReplyDelete
  5. Hello. Cool article. There’s an issue with the website in internet explorer, and you might want to test this… The browser is the marketplace chief and a large element of other folks will miss your great writing due to this problem. new york web design company

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Youre so cool! I dont suppose Ive read anything like this before. So nice to find somebody with some original thoughts on this subject. realy thank you for starting this up. this website is something that is needed on the web, someone with a little originality. useful job for bringing something new to the internet! new york web design company

    ReplyDelete
  8. Good post , I am going to spend more time researching this topic new york web designs

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. very good good…this post deserves almost nothing …hahaha merely joking: S …nice write-up: P branding sf

    ReplyDelete
  11. Yay google is my king helped me to find this great web site ! . branding san francisco

    ReplyDelete
  12. I agree completely with what you said. Great Stuff. Keep it going.. branding san francisco

    ReplyDelete
  13. yourself’m as burning with excitement along accumulative concentrating. alter ego was rather apocalyptic by the mated ethical self went up to. It’s punk up to closed ego dispirited. All respecting those topics are movables her should discover no end touching unpronounced. Thanks so much! best branding agencies san francisco

    ReplyDelete
  14. A blog like yours should be earning much money from adsense..-.,” san fran design firms

    ReplyDelete
  15. When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks! design agency san francisco

    ReplyDelete
  16. If you are viewing come up with alter in most of the living, starting point generally L . a . Weight reduction cutting down on calories platform are a wide stair as part of your attaining that most agenda. weight loss ux san francisco

    ReplyDelete
  17. Thank you for your very good information and respond to you. used car san jose design agencies sf

    ReplyDelete
  18. This article portrays the historical backdrop of animation in the US of America since the late 80's until the mid twenty-first century.mangakakalot

    ReplyDelete
  19. I’m impressed, I must say. Truly rarely must i encounter a weblog that’s both educative and entertaining, and without a doubt, you have hit the nail about the head. Your concept is outstanding; the thing is something too few people are speaking intelligently about. My business is happy that we stumbled across this within my search for some thing relating to this. ipad mockup

    ReplyDelete
  20. There a few intriguing points with time in this post but I don’t know if all of them center to heart. There exists some validity but I will take hold opinion until I take a look at it further. Excellent write-up , thanks and that we want a lot more! Added onto FeedBurner likewise los angeles web design

    ReplyDelete
  21. Hello! I merely wish to make a enormous thumbs up for the fantastic information you might have here with this post. I am returning to your website to get more detailed soon. web designer la

    ReplyDelete
  22. Needed to compose you a tiny note to finally thank you very much yet again for your personal splendid methods you have discussed above. It is strangely open-handed with people like you to provide publicly all that a number of people would have marketed as an electronic book to generate some bucks for their own end, primarily now that you could possibly have tried it if you ever wanted. These inspiring ideas likewise acted like a fantastic way to know that the rest have the same dreams really like my personal own to see a whole lot more concerning this problem. I’m sure there are thousands of more enjoyable times in the future for many who check out your blog. top web design companies

    ReplyDelete
  23. you are in reality a excellent webmaster. The website loading pace is incredible. It seems that you’re doing any distinctive trick. Also, The contents are masterpiece. you have performed a wonderful task on this subject! website design

    ReplyDelete
  24. That is, the studio uses the appearance of the characters and the details in the scenes around them to express the characters' personalities and foibles.

    watch cartoons online

    ReplyDelete
  25. It is to be noted that while creating an animation sequence, an action should never be brought to a complete stop before starting another action. Overlapping maintains a continual flow between whole phrases of actions. Anime Like Sword Art Online

    ReplyDelete

Contact form

Name

Email *

Message *