Happy Easter! /CSS Easter Animation

Happy Easter everyone. Stay safe, and keep well!

To create the Easter animation follow the steps below.

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

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!