In this blog, we will learn how easy to create rotating and translating images by using css3 keyframes, here we will create spinning wind turbine and a blue sky with clouds floating in the background.
In this example I have taken images of clouds fan and image of stand and place them on different position according to the requirement, the position of fan and blade is absolute. Here I have used vendor prefixes on various properties, it is used for compatibility with older browsers
Html code is:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="scenery">
<img class="clouds small" src="images/cloud_sml.png" width="80" height="36"/>
<img class="clouds medium" src="images/cloud_med.png" width="110" height="52"/>
<img class="clouds large" src="images/cloud_lrg.png" width="10" height="67"/>
<img class="fan" src="images/blades.png" width="120" height="120"/>
<img class="stand" src="images/stand.png" width="12" height="130"/>
</div>
</body>
</html>
CSS code is:
#scenery {
position: absolute;
top: 200px;
left: 40%;
width: 400px;
height: 300px;
overflow: hidden;
background: #0099ff;
/* Firefox */
background: -moz-linear-gradient(top, #0099ff, #00ccff);
/* WebKit - Chrome and Safari */
background: -webkit-linear-gradient(top, #0099ff, #00ccff);
/* Internet Explorer 10 */
background: -ms-linear-gradient(top, #0099ff, #00ccff);
/* Opera */
background: -o-linear-gradient(top, #0099ff, #00ccff);
/* general syntax */
background: linear-gradient(top, #0099ff, #00ccff);
}
.stand {
/* image is 12 x 130 px */
position: absolute;
bottom: 0;
left: 250px;
}
.fan {
/* image is 120 x 120 px */
position: absolute;
top: 116px;
left: 196px;
/* Animation properties to be added here */
}
.large {
/* image is 130 x 67 px */
top: 40px;
left: -140px;
}
.medium {
/* image is 100 x 52 px */
top: 80px;
left: -110px;
}
.small {
/* image is 70 x 36 px */
top: 10px;
left: -80px;
}
@keyframes fanSpin {
from { transform: rotate(0deg); }
to { transform: rotate(1440deg); }
}
/* Firefox */
@-moz-keyframes fanSpin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(1440deg); }
}
/* WebKit - Chrome and Safari */
@-webkit-keyframes fanSpin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(1440deg); }
}
/* Opera */
@-o-keyframes fanSpin {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(1440deg); }
}
.fan{
/* Firefox */
-moz-animation: fanSpin 10s ease-in-out infinite;
/* WebKit - Chrome and Safari */
-webkit-animation:fanSpin 10s ease-in-out infinite;
/* Opera */
-o-animation: fanSpin 10s ease-in-out infinite;
/* general syntax */
animation: fanSpin 10s ease-in-out infinite;
}
@keyframes cloudsDrift {
from { transform: translateX(0px); }
to { transform: translateX(540px); }
}
/* Firefox */
@-moz-keyframes cloudsDrift {
from { -moz-transform: translateX(0px); }
to { -moz-transform: translateX(540px); }
}
/* WebKit - Chrome and Safari */
@-webkit-keyframes cloudsDrift {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(540px); }
}
/* Opera */
@-o-keyframes cloudsDrift {
from { -o-transform: translateX(0px); }
to { -o-transform: translateX(540px); }
}
.clouds{
/* Firefox */
-moz-animation: cloudsDrift linear infinite;
/* WebKit - Chrome and Safari */
-webkit-animation: cloudsDrift linear infinite;
/* Opera */
-o-animation: cloudsDrift linear infinite;
/* general syntax */
animation: cloudsDrift linear infinite;
}
.large{
/* Firefox */
-moz-animation-duration: 40s;
/* WebKit - Chrome and Safari */
-webkit-animation-duration: 40s;
/* Opera */
-o-animation-duration: 40s;
/* general syntax */
animation-duration: 40s;
}
.medium{
/* Firefox */
-moz-animation-duration: 30s;
/* WebKit - Chrome and Safari */
-webkit-animation-duration: 30s;
/* Opera */
-o-animation-duration: 30s;
/* general syntax */
animation-duration: 30s;
}
.small{
/* Firefox */
-moz-animation-duration: 20s;
/* WebKit - Chrome and Safari */
-webkit-animation-duration: 20s;
/* Opera */
-o-animation-duration: 20s;
/* general syntax */
animation-duration: 20s;
}
Note: This will work with the recent versions of all major browsers like Firefox, Chrome, Opera, Safari and IE
0 Comment(s)