In this tutorial, we are going to create a rotating fan animation using HTML and CSS.
Source Code
index.html
<html>
<head>
<title>Moving Fan Animation using HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="fan fan-1">
<div class="core-part">
<div class="wing wing-1"></div>
<div class="wing wing-2"></div>
<div class="wing wing-3"></div>
<div class="wing wing-4"></div>
<div class="wing wing-5"></div>
<div class="wing wing-6"></div>
</div>
</div>
<div class="fan fan-2"></div>
<div class="fan fan-3">
<div class="buttons">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
</body>
</html>
style.css
body{
margin: 50px 0 0;
background: aliceblue;
}
.fan{
margin: 0 auto;
background: black;
}
.fan-1{
z-index: 2;
width: 275px;
height: 275px;
border: 10px solid blue;
border-radius: 50%;
}
.fan-1:hover{
animation-name: swing;
animation-duration: 5s;
animation-timing-function: liner;
animation-iteration-count: infinite;
}
@keyframes swing{
0%{
transform: none;
}
25%{
transform: rotate(90deg);
transform: translate(25px);
}
50%{
transform: none;
}
75%{
transform: rotate(-90deg);
transform: translate(-25px);
}
100%{
transform: none;
}
}
.core-part{
margin: 0 auto;
background: gainsboro;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
top: 112px;
opacity: 1.0;
animation-name: rotation;
animation-duration: 0.01s;
animation-timing-function: liner;
animation-iteration-count: infinite;
}
@keyframes rotation{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.wing{
margin: 0 auto;
background: lightsteelblue;
width: 30px;
height: 100px;
border-radius: 5px;
position: relative;
}
.wing-1{
top: 50px;
transform: rotate(0deg);
}
.wing-2{
right: 65px;
bottom: 88px;
transform: rotate(60deg);
}
.wing-3{
right: 64px;
bottom: 264px;
transform: rotate(120deg);
}
.wing-4{
bottom: 400px;
transform: rotate(180deg);
}
.wing-5{
left: 65px;
bottom: 462px;
transform: rotate(240deg);
}
.wing-6{
left: 65px;
bottom: 488px;
transform: rotate(300deg);
}
.fan-2{
z-index: 1;
width: 50px;
height: 140px;
border-radius: 5px;
border-top: 10px solid blue;
position: relative;
border-bottom: 3px solid dimgray;
bottom: 10px;
}
.fan-3{
width: 250px;
height: 140px;
border: 5px solid blue;
border-radius: 20px;
position: relative;
bottom: 35px;
display: flex;
justify-content: center;
align-content: center;
}
.buttons{
margin-top: 70px;
width: 100px;
display: flex;
justify-content: center;
justify-content: space-between;
align-content: center;
}
.button{
width: 15px;
height: 15px;
background: gray;
border-radius: 50%;
}
