How to Animate Image using CSS Stylesheet

By Jitendra kumar sahoo

Pin It

advertisement

Share It ----------------------- Save on Delicious

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.

   

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;
}

ALSO SEE: How to Design a simple Webpage using CSS and HTML

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 <a href='http://trickmaker.blogspot.com/2012/04/how-to-animate-image-using-css.html' rel='dofollow' title='How to Animate Image using CSS Stylesheet'> How to Animate Image using CSS Stylesheet | Trickmaker | Solution to hidden treasure of technology </a>