CSS EASTER EGG ANIMATION/ CSS Hover Transition

Demo:

To create the CSS Easter Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="easter">
  <div class="egg">
    <div class="yolk"></div>
  </div>
  <div class="shellBottom">
    <div class="bottom"></div>
  </div>
    <div class="shellTop">
      <div class="hoverMe">Hover Me</div>
      <div class="top"></div>
    </div>
    <div class="shadow"></div>
    <div class="text">Happy Easter!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.easter {
  position: relative;
  left:-100px;
  top:-100px;
}

Style the egg:

.egg {
  position: absolute;
  width: 136px;
  height: 190px;
  background-color: #fffffc;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index:1;
  top:0;
}

.yolk {
  position: absolute;
  content:"";
  width: 90px;
  height:90px;
  background-color: #ffb703;
  border-radius:50%;
  top:65px;
  left:20px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.yolk:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:7px;
  height:10px;
  border-radius:50%;
  top:35px;
  left:30px;
  box-shadow: 20px 0 #333;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2.5s infinite;
}
.yolk:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width:20px;
  height:10px;
  border-radius: 0 0 30px 30px;
  top:50px;
  left:34px;
}

Add the blink animation to the egg’s eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

Style the shell:

.shellBottom {
  background-color: #a2d2ff;
  position: absolute;
  z-index:3;
  width:150px;
  height:77.5px;
  border-radius: 0 0 100px 100px;
  left:-10px;
  top:150px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.shellBottom:before {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  top:-30px;  
}

.shellBottom:after {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:25px;
}

.bottom {
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:75px;
}

.bottom:before {
  content:"";
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-left: 25px solid transparent;
  left:25px;
}

.bottom:after {
  content:"";
  position: absolute;
  height:30px;
  width:5px;
  background-color: rgba(0,0,0,0.1);
  left:45px;
}

.shellTop {
  position: absolute;
  background-color: #a2d2ff;
  box-shadow: inset -5px 0 rgba(0,0,0,0.1);
  width:150px;
  height:140px;
  border-radius: 50% 50% 0 0/60% 60% 0 0;
  top:-20px;
  left:-10px;
  z-index:2;
  transition: ease 1s;
}

.shellTop:before, .shellTop:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
}

.shellTop:after {
  left:50px;
}

.top {
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
  left:100px;
}

.hoverMe {
  position: absolute;
  font-family:arial black;
  top:60px;
  left:35px;
  color: #bde0fe;
}

Add transition on hover:

.shellTop:hover {
  top:-80px;
}

Style the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:170px;
  height:20px;
  border-radius:50%;
  top:212px;
  left:48px;
}

Add the Easter wishes:

.text {
  position: relative;
  left:-250px;
  font-size:20px;
  font-family: arial black;
  top:100px;
  visibility:hidden;
}

.text:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  border-radius:30px;
  background-color: #fff;
  left:-25px;
  top:-35px;
  z-index:-1;
}

.text:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 20px solid #fff;
  border-right:35px solid transparent;
  top: 20px;
  left:170px;
}

Add transition on hover to make the wishes visible:

.container:hover .text {
  visibility:visible;
  transition-delay:.2s;
}

To see the CSS Easter Animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Egg Shape and CSS Easter eggs

CSS Paper Plane Animation

CSS Bubble Animation