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:
Enjoy coding!
Hey, here’s something that might interest you:
CSS Easter Bunny/ Foldable Easter Card
CSS Egg Shape and CSS Easter eggs
Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)
