CSS Easter Egg Animation

To learn how to create the CSS Easter Egg Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="easter-egg-animation">
  <div class="easter-egg">
  <div class="egg">
    <div class="shell"></div>
  </div>
  <div class="egg-top">
    <div class="shell-top"></div>
  </div>
  </div>
  <div class="shadow"></div>
  <div class="text">Happy</br>Easter!</div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #55ceaf;
}

#easter-egg-animation {
  position: relative;
  cursor: pointer;
}

Style and animate the egg:

.easter-egg {
  position: relative;
  transform-origin: bottom;
  animation: wiggle 2s forwards;
}

.egg {
   position: relative;
   width: 160px;
   height: 80px;
   background-color: #19a0bd;
   border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
   top:90px;
}

.egg-top {
   position: absolute;
   width: 160px;
   height: 120px;
   background-color: #19a0bd;
   border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
   top:-44px;
   left:0;
   transform-origin: left;
   animation: open .5s ease forwards 2s;
}

@keyframes open {
  0% {transform: rotate(0);}
  100% {transform: rotate(-220deg);top:0;}
}

.egg:before, .egg:after, .egg-top:before, .shell:before {
   content:"";
   position: absolute;
   border-style: solid;
}

.egg:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 0;
  top: -20px;
}

.egg:after {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 0 20px 20px;
  top: -20px;
  left: 140px;
}

.egg-top:before {
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
  top:119px;
}

.shell-top, .shell-top:before, .shell-top:after {
  position: absolute;
  border-style: solid;
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.shell-top {
  left:40px;
  top:119px;
}

.shell-top:before, .shell-top:after {
  content:"";
  top:-20px;
}

.shell-top:before {
  left:20px;
}

.shell-top:after {
  left:60px;
}

.shell {
  position: absolute;
}

.shell:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 20px;
  top:-19px;
  left:20px;
  filter: drop-shadow(40px 0 #19a0bd) drop-shadow(40px 0 #19a0bd);
}

.egg-top:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,.2);
  width:25px;
  height:60px;
  border-radius:50%;
  transform: rotate(-27deg);
  top:30px;
  left:115px;
}

.shell:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #f1f3ed;
  top: 30px;
  left:20px;
  box-shadow: 30px 25px #f1f3ed, 60px 0 #f1f3ed, 90px 20px #f1f3ed, 120px -5px #f1f3ed, 30px -25px #f1f3ed, 90px -25px #f1f3ed;
}

.shadow {
  position: absolute;
  width:220px;
  height:30px;
  background-color: rgba(0,0,0,.1);
  border-radius:50%;
  z-index:-1;
  top:147px;
  left:-27px;
}

@keyframes wiggle {
  0% {transform: rotate(0);}
  20% {transform: rotate(-20deg);}
  40% {transform: rotate(20deg);}
  60% {transform: rotate(-20deg);}
  80% {transform: rotate(20deg);}
  85% {transform: rotate(-20deg);}
  90% {transform: rotate(20deg);}
  95% {transform: rotate(-20deg);}
  99% {transform: rotate(20deg);}
  100% {transform: rotate(0);}
}

Style and animate the text:

.text {
  position: absolute;
  top:100px;
  left:45px;
  text-align: center;
  color: white;
  font-size: 25px;
  z-index:-1;
  transform-origin: bottom;
  animation: up .5s ease forwards 2s;
}

@keyframes up {
  0% {transform: translateY(0) scale(1);}
  100% {transform: translateY(-80px) scale(2);}
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#easter-egg-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial: