Happy Easter everyone. Stay safe, and keep well!

To create the Easter animation follow the steps below.
- Add HTML
- Add CSS
- Add CSS Animation
To see the live output of the animation click here.
Step1.
Add HTML
<div class="container">
<div class="bunny">
<div class="face"></div>
<div class="smile"></div>
<div class="nose"></div>
<div class="teeth"></div>
<div class="ears"></div>
</div>
<div class="bunny2">
<div class="face2"></div>
<div class="smile"></div>
<div class="nose"></div>
<div class="teeth"></div>
<div class="ears2"></div>
</div>
<div class="shadow"></div>
</div>
Step2.
Add CSS
Set the background colour, and the position of the container.
body {
background-color: #DAF7A6;
}
.container {
position: relative;
left: 40%;
top: 150px;
}
Style bunnies:
body {
background-color: #DAF7A6;
}
.container {
position: relative;
left: 40%;
top: 150px;
}
.bunny {
position: relative;
animation: jump 2s ease infinite;
}
.face {
position: absolute;
display: block;
width: 160px;
height: 220px;
background-color: #F1948A;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
z-index:1;
}
.face:after {
position: absolute;
content:"";
background-color: #000;
border-radius:50%;
width: 15px;
height: 20px;
top: 35px;
left: 50px;
}
.face:before {
position: absolute;
content:"";
background-color: #000;
border-radius:50%;
width: 15px;
height: 20px;
top: 35px;
left: 90px;
}
.bunny2 {
position: relative;
left: 170px;
animation: jump 2.5s ease infinite;
}
.face2 {
position: absolute;
display: block;
width: 160px;
height: 220px;
background-color: #1ABC9C;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.face2:after {
position: absolute;
content:"";
background-color: #000;
border-radius:50%;
width: 15px;
height: 20px;
top: 35px;
left: 50px;
}
.face2:before {
position: absolute;
content:"";
background-color: #000;
border-radius:50%;
width: 15px;
height: 20px;
top: 35px;
left: 90px;
}
.smile {
position: absolute;
background-color: transparent;
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow:inset 3px -3px 0 #000;
transform: rotate(-40deg);
top:50px;
left: 53px;
z-index:3;
}
.smile:after {
content:"";
position: absolute;
width:10px;
height:3px;
background-color: #000;
left:2px;
top:5px;
}
.smile:before {
content:"";
position: absolute;
width:10px;
height:3px;
background-color: #000;
left:39px;
top:40px;
transform: rotate(90deg);
}
.nose {
position: absolute;
width: 3px;
height: 25px;
background-color: #000;
top: 72px;
left: 75px;
z-index:5;
}
.nose:after {
content:"";
position: absolute;
width: 25px;
height: 15px;
background-color: #C0392B;
border-radius: 40px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
left:-10px;
}
.teeth {
position: absolute;
background-color: #fff;
width: 10px;
height: 15px;
border-radius: 5px 5px 20px 20px;
top:96px;
left: 70px;
z-index:2;
}
.teeth:after {
content:"";
position: absolute;
background-color: #fff;
width: 10px;
height: 15px;
border-radius: 5px 5px 20px 20px;
left: 8px;
z-index:2;
}
.ears {
position: absolute;
width: 40px;
height: 120px;
background-color: #F1948A;
top:-105px;
border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
transform: rotate(20deg);
left: 100px;
opacity:0.7;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.ears:after {
content:"";
position: absolute;
width: 40px;
height: 120px;
background-color: #F1948A;
top:-105px;
border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
transform: rotate(-40deg);
left: -70px;
top:25px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.ears2 {
position: absolute;
box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
width: 40px;
height: 120px;
background-color: #1ABC9C;
border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
opacity:0.7;
z-index:-1;
top:-100px;
left:20px;
transform: rotate(-20deg);
}
.ears2:after {
content:"";
position: absolute;
width: 38px;
height: 90px;
background-color: #1ABC9C;
left: 65px;
transform: rotate(40deg);
top: 60px;
border-radius: 50%;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.ears2:before {
content:"";
position: absolute;
width: 38px;
height: 90px;
background-color: #1ABC9C;
left: 92px;
transform: rotate(-40deg);
top: 70px;
border-radius: 50%;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
z-index:1;
transform-origin: top center;
animation: swing 2s ease infinite;
}

Add shadow:
.shadow {
position: absolute;
width: 350px;
height: 50px;
background-color:#000;
top: 200px;
border-radius: 50%;
opacity: 0.5;
left:-5px;
z-index:-2;
animation: scale 1.5s infinite;
}

Step3.
Add CSS Animation
For the shadow:
@keyframes scale {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
For the bunny’s ear:
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
To make bunnies jump:
@keyframes jump {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
To see the live output of the animation go to: lenastanley.com.
Enjoy coding!