Categories
CSS HTML Web development

CSS Background Change Animation – Day & Night

CSS Night & Day

Hello! To change the element/ background colour we can use the CSS Animation.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 5s;
  border-radius: 50%;
}

@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: blue;}
  50%  {background-color: yellow;}
  100% {background-color: red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Output:

Now when you know the base of the background change animation we can go further.

In the animation below I used exactly the same rule of the changing background.

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

What do you need to do?

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

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame"></div>
    <div class="windowsill"></div>
    <div class="holder"></div>
    <div class="curtain"></div>
  </div>
  <div class="cat">
    <div class="tail"></div>
    <div class="ears"></div>
  </div>
  <div class="sun"></div>
  <div class="moon"></div>
  </div>

Step2.

Add CSS

Set the size and the color of the background:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #53CABD;
  animation: background 10s linear infinite alternate;
}

Set the position of the container and the window: 

.container {
  top:-200px;
  left:-150px;
  position: relative;
}
.window {
  position: relative;
}

Style the frame, window sill, and curtains:

.frame {
  position: absolute; 
  width: 450px;
  height: 250px;
  background-color: #41BEDD;
  border: 10px solid #311C1C;
  border-radius: 5px;
  box-shadow:inset -15px -15px 0 rgba(0,0,0,0.07);
  left:-80px;
  animation: frame 10s linear infinite alternate;
  
}
.frame:after {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -50px;
  left: 515px;
}
.windowsill {
  position: absolute;
  width: 580px;
  height: 30px;
  background-color: #311C1C;
  top: 265px;
  left:-125px;
  border-radius: 50px;
  box-shadow: 15px 15px rgba(0,0,0,0.07);
  
}
.windowsill:after {
  content:"";
  position: absolute;
  width: 600px;
  height: 10px;
  background-color: #BDBDBD;
  top:-300px;
  left: -20px;
  
}
.windowsill:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -305px;
  left: -35px;
  
}
.holder {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-right: 200px solid transparent;
  left: -120px;
  top:-25px;

}
.holder:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-right: 50px solid transparent;
}
.holder:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-5px;
  top:-5px;
}
.curtain {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-left: 200px solid transparent;
  top:-25px;
  left:240px;
}
.curtain:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-left: 50px solid transparent;
  left:-50px;
}
.curtain:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-10px;
  top:-5px;
}

Style a cat: 

.cat {
  position: absolute;
  z-index:10;
}
.tail {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius:50%;
  box-shadow:inset 10px -5px 0 black;
  top: 210px;
  left:80px;
  transform: rotate(5deg);
}
.tail:after {
  content:"";
  position: absolute;
  background-color: black;
  width: 70px;
  height: 80px;
  top: -20px;
  left:20px;
  border-radius:50%;
  box-shadow: 10px -15px 0 rgba(0,0,0,0.07);
}
.tail:before {
  content:"";
  position: absolute;
  background-color: black;
  box-shadow: 5px -15px 0 rgba(0,0,0,0.07);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top:-50px;
  left: 30px;
}
.ears {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:152px;
  left:145px;
  transform: rotate(20deg);
  
}
.ears:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:12px;
  left:-40px;
  transform: rotate(-40deg);
}

Add Sun and Moon:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  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;
}
.moon {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow:inset -15px -15px 0 #c7ebde;
  animation: fade-in 10s infinite alternate;
}
.moon:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
  
}
.moon:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
}

Step3.

Add CSS Animation

For the background:

@keyframes background {
  0% {
    background: #53CABD;
  }
  100% {
    background: rgba(3, 43, 62, .94);
  }
}

For the window:

@keyframes frame {
  0% {
    background: #41BEDD;
  }
  100% {
    background: #23355e;
  }
}

For Sun:

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

and for the Moon:

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
    50% {
    opacity: 0.3;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes moon {
  0 {transform: scale(0.3) rotate(360deg);opacity:0;}
  50% {opacity:0.2;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0.1;}
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Leave a Reply

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