| advertisement |
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:
HTML Code for Animation of Image in Webpage:
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;
}
<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.htmlhttp://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