Trickmaker | Solution to hidden treasure of technology
Register or
Login with Facebook for commenting
RSS Trickmaker Home Page Print the Page Mobile Version Trickmaker Desktop Version Trickmaker
advertisement

Be a Guest Blogger

Saturday, April 7, 2012

How to Animate Image using CSS Stylesheet

By
Pin It
advertisement
Share It
-----------------------






Animate Image in Webpage using Stylesheet (CSS) with two type of animation effect. First animation is done when hover on the image and Second animation is done continuously. Below example of animation is given with the CSS code for animating image.

In example when hover your cursor on first heart image it beat twice and another image is continuously beating.

animate image on hover   animate image continuously

Hover on this image to animate.         Continuously animating image

CSS Code for Animation:

@-webkit-keyframes resize {
0% {
height:220px;
width:220px;
opacity:0.7;
}
50% {
height:240px;
width:240px;
opacity:0.4;
}
}

<!...Start Code for Animation When Hover on Image...> 
#anihover:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
}
<!...End Code for Animation When Hover on Image...>

<!...Start Code for Animation Continuously...>
#anicont {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
position: absolute;
width: 200px;
height:200px;
}
<!...End Code for Animation Continuously...>

img{
height:200px;
width:200px;
opacity:1;
}


HTML Code for Animation of Image in Webpage:

<img id="anihover" src="image url" />
<img id="anicont" src="image url" />

Attachments:

http://www.trickmaker.com/2012/03/how-to-create-mac-os-x-lion-usb-stick.html
http://www.trickmaker.com/2012/04/citizens-of-world-become-slaves-to.html
http://www.trickmaker.com/2012/04/how-to-install-mac-os-x-lion-on-non.html

If you LIKE this, then copy the below and put this in your WEBSITE or BLOG