CSS Background Change Animation - Day & Night

Demo:

*to see the animation on the website click here.

What do you need to do?

To create the CSS Day & Night Animation follow the steps below:

Add HTML.
Add CSS.
Add CSS Animation.

Step1.

Add HTML

<div class="day-and-night">
  <div class="window">
    <div class="shine"></div>
  </div>
  <div class="sill"></div>
  <div class="plant">
    <div class="pot"></div>
  </div>
  <div class="cat">
    <div class="paw"></div>
    <div class="claws"></div>
    <div class="tail"></div>
    <div class="eyes"></div>
    <div class="earRight"></div>
    <div class="earLeft"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0a9396;
  animation: background 10s linear infinite alternate;
}
.day-and-night {
  position: relative;
}

Style the window

.window {
  position: relative;
  overflow: hidden;
  width: 250px;
  height:300px;
  background-color: #48cae4;
  border-radius:150px 150px 0 0;
  border:10px solid #005f73;
  animation: window 10s linear infinite alternate;
}
.window:before {
  position: absolute;
  content:"";
  width: 70px;
  height:100px;
  background-color: #3d5a80;
  top:220px;
  box-shadow: 40px 20px #3d5a80, 100px -10px #3d5a80,150px 30px #3d5a80, 200px 50px #3d5a80, 20px -30px rgba(61,90,128,0.7),130px -40px rgba(61,90,128,0.7), 200px 0 rgba(61,90,128,0.7);
}

.window:after {
  position: absolute;
  content:"";
  width:15px;
  height:20px;
  background-color: #98c1d9;
  top:230px;
  left:5px;
  box-shadow: 20px 0 #98c1d9,40px 0 #98c1d9, 170px 30px #98c1d9, 190px 30px #98c1d9; 
}

.shine {
  position: absolute;
  width: 10px;
  height: 15px;
  background-color: #7293a6;
  top:230px;
  left:205px;
  box-shadow: 15px 0 #7293a6, 30px 0 #7293a6, -180px -30px #7293a6, -165px -30px #7293a6, -150px -30px #7293a6, -135px -30px #7293a6;
}

.shine:before {
  content:"";
  position: absolute; 
  width: 40px;
  height:10px;
  background-color: #495e6b;
  left:-90px;
  top:-5px;
  box-shadow: 0 20px #495e6b, 30px -35px rgba(73, 94, 107,0.6);
}
.shine:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.2);
  height: 300px;
  width: 50px;
  transform: skew(-30deg);
  left:-170px;
  top:-230px;
  box-shadow: 150px 0 rgba(255,255,255,0.2);
}

Add window sill:

.sill {
  position: absolute;
  background-color: #005f73;
  width: 370px;
  height: 30px;
  left:-50px;
  border-radius: 20px;
  top:300px;
  box-shadow: inset -5px -5px #003945;
}

.sill:before, .sill:after {
  content:"";
  position: absolute;
  background-color: #005f73;
}

.sill:before {
  width:5px;
  height: 300px;
  top:-300px;
  left:185px;
}

.sill:after {
  height:5px;
  width: 250px;
  top:-190px;
  left:60px;
  box-shadow: 0 100px #005f73;
}

Add the plant:

.plant {  
  position: absolute;
  width:5px;
  height:80px;
  background-color: #007f5f;
  left:10px;
  top:200px;
}

.plant:before {
  content:"";
  position: absolute;
  background-color: #2b9348;
  width: 30px;
  height:30px;
  border-radius:100% 0;
  top:-27px;
  left:3px;
  box-shadow: 0 30px #2b9348, 0 60px #2b9348;  
}

.plant:after {
  content:"";
  position: absolute;
  background-color: #007f5f;
  width: 30px;
  height:30px;
  border-radius:0 100%;
  top:-30px;
  left:-27px;
  box-shadow: 0 30px #007f5f, 0 60px #007f5f;
}

.pot {
  position: absolute;
  width: 60px;
  height: 30px;
  border-radius:0 0 20px 20px;
  background-color: #f07167;
  top:70px;
  left:-30px;
  box-shadow: inset 0 5px #fff;
}

Style the cat:

.cat {
  position: absolute;
  background-color: #333;
  width: 100px;
  height:60px;
  top:240px;
  left:120px;
  border-radius:100px 100px 0 0;  
}

.cat:before {
  content:"";
  position: absolute;
  width: 70px;
  height: 45px;
  border-radius:100px 100px 0 0; 
  background-color: #3d3d3d;
  left:-30px;
  top:15px;
}

.cat:after {
  content:"";
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:15px;
  height:15px;
  background-color: #d6d6d6;
  top:45px;
  left:-45px;
}

.paw {
  position: absolute;
  width:15px;
  height: 60px;
  background-color: #333;
  border-radius:0 0 30px 30px;
  box-shadow: inset 0 -10px #d6d6d6;
  top:45px;
  left:40px;
  overflow: hidden;
  z-index:2;
}

.paw:before {
  content:"";
  position: absolute;
  width:3px;
  height: 7px;
  background-color: #333;
  box-shadow: 5px 0 #333;
  top:54px;
  left:3px;
}

.claws {
  position: absolute;
  width:3px;
  height: 7px;
  background-color: #333;
  left:-39px;
  top:57px;
  box-shadow: 5px 0 #333;
  z-index:1;
}

.claws:before {
  content:"";
  position: absolute;
  width: 45px;
  height: 25px;
  background-color: #d6d6d6;
  border-radius:100px 100px 0 0;
  top:-22px;
  left:20px;
}

.claws:after {
  content:"";
  position: absolute;
  height:7px;
  width: 7px;
  background-color: #333;
  border-radius:50%;
  top:-5px;
  left:40px;
  animation:scale 1s linear infinite;
}
.tail {
  position: absolute;
  width: 50px;
  height: 60px;
  border-right: 10px solid #333;
  border-bottom: 10px solid #333;
  border-bottom-right-radius:100%;
  top:50px;
  left:40px;
}

.tail:before {
  content:"";
  position: absolute;
  width:10px;
  height:10px;
  background-color: #333;
  border-radius:50%;
  top:60px;
  left:-5px;
}

.eyes {
  position: absolute;
  width: 10px;
  height:15px;
  border-radius:20px;
  background-color: #f8ad9d;
  box-shadow: inset 0 9px #787878;
  z-index:3;
  top:36px;
  left:-3px;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  border-bottom: 2px solid #333;
  border-left: 2px solid #333;
  border-bottom-left-radius: 100px;
  width:7px;
  height:7px;
  transform: rotate(-40deg);
  top:-8px;
}

.eyes:before {
  left:-12px;
}

.eyes:after {
  left:15px;
}

.earRight {
  position: absolute;
  width:0;
  height:0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 30px solid #3d3d3d;
  transform: rotate(20deg);
  left:5px;
}

.earRight:before, .earLeft:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 15px solid #f8ad9d;
  top:5px;
  left:-7px;
}

.earLeft {
  position: absolute;
  width:0;
  height:0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 30px solid #3d3d3d;
  transform: rotate(-20deg);
  left:-30px;
}

Step3.

Add CSS Animation

For the background:

@keyframes background {
  0% {
    background: #0a9396;
  }
  100% {
    background: rgba(3,43,62,0.94);
  }
}

For the window:

@keyframes window {
  0% {
    background: #48cae4;
  }
  100% {
    background: #23355e;
  }
}

For the Cat:

@keyframes scale {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}

Enjoy coding!

Hey, here’s something that might interest you:

How to change the CSS Gradient Background On Scroll?

How to create a gradient border using a CSS conic gradient?

CSS Zoom on Hover

Share this: