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.
To see the live output of the animation click here.
What do you need to do?
- Add HTML.
- Add CSS.
- 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!