Categories
CSS Web development

CSS Animation- Windmill

I visited Windmills in Rotterdam last month. It was really great to walk around the mills (you can see some pictures on my Instagram).

CSS Windmill Animation
Do you like this image? Check more images in the store.

Inspired by this amazing time I created CSS Windmill animation. If you would like to learn how to create CSS Windmill Animation, follow the steps below.

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Let’s start!

Step1.

Add HTML

Draw your Windmill:

<div class="container">
  <div class="circle"></div>
  <div class="windmill">
    <div class="sun"></div>
    <div class="clouds"></div>
    <div class="clouds1"></div>
    <div class="mill"></div>
    <div class="grass"></div>
    <div class="roof"></div>
     <div class="fan">
            <div class="fan1"></div>
            <div class="fan2"></div>
            <div class="fan3"></div>
            <div class="fan4"></div>
        </div>
    <div class="bricks"></div>
    <div class="door"></div>
    <div class="window"></div>
  </div>
</div>

Step2.

Add CSS

Set the color and position of your background:

body {
  background: #1A5276;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  position:relative;
}
.circle {
  top:-230px;
  left:-280px;
  position:absolute;
  width:450px;
  height:450px;
  background-color: #50befa;
  border-radius:50%;
  z-index:-30;
  box-shadow:inset 10px 10px 0 rgba(0,0,0,0.07);
}
.circle:after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background-color: #50befa;
  border-radius:50%;
  left:350px;
  top:140px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.circle:before {
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  background-color: #50befa;
  border-radius:50%;
  left:340px;
  top:10px;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
}
CSS Animation Background

Style the sky, add Sun and Clouds:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:-150px;  
  top: -170px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: sun 10s alternate infinite;
  
}
.sun:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  
}
.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
}
.clouds {
  position:absolute;
  width:160px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  opacity:0.7;
  top:-100px;
  left:-200px;
  z-index:-22;
  animation: cloud 10s linear alternate-reverse infinite;
}
.clouds1 {
  content:"";
  position:absolute;
  width:140px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  left:-320px;
  top:-175px;
  animation: cloud 10s linear alternate infinite;   
  opacity:0.8;
  
}
.clouds:before {
  content:"";
  position:absolute;
  width:160px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  left:290px;
  top:-65px;
  
}
    

The animation should look like that:

CSS Background - Clouds and Sun

Add windmill with the roof:

.windmill {
  position:relative; 
  top:0;
}
.mill {
  position:absolute; 
  border-bottom: 200px solid #EFD5C3;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 200px;
  z-index:-10;
  top:-50px;
  left:-30px;
}
.mill:after {
  position:absolute;
  content:"";
  width:270px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:190px;
  left:-35px;
}
.mill:before {
  content:"";
  position:absolute;
  width:240px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:85px;
  left:-20px;
}
.grass {
  position:absolute;
  background-color:#196F3D;
  width:400px;
  height:50px;
  border-radius:100px;
  top:150px;
  left:-100px;
  z-index:-20;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
}
.grass:after {
  content:"";
  position:absolute;
  background-color:#196F3D;
  width:350px;
  height:30px;
  border-radius:0 0 100px 100px;
  top:50px;
  left:25px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.roof {
  position:absolute; 
  width:210px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:-60px;
  left:-5px;
  z-index:-5;
}
.roof:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #4D250C;
  top:-90px;
  left:5px;
}
.roof:before {
  position:absolute;
  content:"";
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:20px;
  left:150px;
}


.bricks {
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:-25px;
  left:160px;
  
}
.bricks:after {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:25px;
  left:-160px;
  
}
.bricks:before {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:40px;
  left:-150px;
  
}
.door {
  position:absolute;
  background-color:#784212;
  border:3px solid #4D250C;
  width:50px;
  height:70px;
  border-radius:30px 30px 0 0;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  top:70px;
  left:65px;
}
.door:after {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:25px;
  left:60px;
}
.door:before {
   content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:10px;
  left:70px;
}
.window {
  position:absolute;
  border-radius: 30px 30px 0 0;
  border:3px solid #4D250C;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  background-color:#1A5276;
  width:40px;
  height:40px;
  top:-8px;
  left:70px;
  
}
.window:after {
  content:"";
  position:absolute;
  background-color:#4D250C;
  width:3px;
  height:40px;
  left:18px;
}
.window:before {
  content:"";
  position:absolute;
  background-color:#4D250C;
  width:40px;
  height:3px;
  left:0;
  top:20px;
}

The animation should look like that:

CSS Mill

and add the fan:

.fan {
 z-index: 10;
 width: 192px;
 height: 192px;
 position: absolute;
 left: 0;
 top: -155px;
 animation: spin 12s linear infinite;

}
.fan1 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 92px; 
  top:-30px;
  z-index:6;
  }
.fan1::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan2 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 150px;
  top:18px;
  transform: rotate(90deg);
  z-index:6;
  }
.fan2::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan3 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 92px;
  top:78px;
  transform: rotate(180deg);
  z-index:6;
  }
.fan3::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan4 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 30px;
  top:18px;
  transform: rotate(-90deg);
  z-index:6;
  }
.fan4::before {
    position: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
CSS Windmill

Step3.

Add CSS Animation

For sun and clouds:

@keyframes sun {
  0 {transform: scale(0.8) rotate(360deg);opacity:1;}
  50% {opacity:1;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0.8;}
}
@keyframes cloud {
  100% {
    transform: translateX(95px);
  }
}

And for windmill’s fan:

@keyframes spin { 100% { transform:rotate(360deg); } }

To see the live output visit: lenastanley.com

Watch also the video tutorial:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *