In this blog, we will create an image that will swing like a pendulum continuously using css3 keyframes animation. This type of image can be used in signups and discounts, that will draw more attention of users. In this example, I have used keyframes animation and transform property of css3.
Here are the HTML and CSS code to achieve swing image .
<!doctype html>
<head>
<style>
@-webkit-keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
50%{-webkit-transform: rotate(-5deg)}
100%{-webkit-transform: rotate(10deg);}
}
@keyframes swinging{
0%{transform: rotate(10deg);}
50%{transform: rotate(-5deg)}
100%{transform: rotate(10deg);}
}
.discountimage{
position: relative;
left: 50px;
margin-top: 30px;
-webkit-transform-origin: 35% 0;
transform-origin: 35% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
</style>
</head>
<body>
<img class="discountimage" border="0" src="discount-img.png" width="200" height="368">
</body>
</html>
Note: This blog will run successfully on all the latest version of different browsers like Firefox, Chrome, Opera, IE etc.
0 Comment(s)