To learn how to create the CSS Easter Animation follow the steps below and watch the video tutorial.
Demo:
*to see the animation on the website click here.
Step1.
Add HTML
<div class="easter-animation">
<div class="chick">
<div class="beak"></div>
</div>
<div class="back-flower">
<div class="daisy">
<div class="flower"></div>
</div>
</div>
<div class="egg">
<div class="shell"></div>
</div>
<div class="egg-top">
<div class="shell-top"></div>
</div>
<div class="daisy">
<div class="flower"></div>
</div>
<div class="grass"></div>
<p class="text">- hover over the egg -</p>
</div>Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
height: 100vh;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: #94d2bd;
}
.easter-animation {
position: relative;
cursor: pointer;
}Style the egg:
.egg {
position: relative;
width: 160px;
height: 80px;
background: linear-gradient(0deg, rgba(249,65,68,1) 30%, rgba(87,117,144,1) 30%, rgba(95,127,139,1) 60%, rgba(144,190,109,1) 60%, rgba(128,168,113,1) 95%, rgba(249,199,79,1) 95%);
border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
top:90px;
}
.egg-top {
position: absolute;
width: 160px;
height: 120px;
background: linear-gradient(180deg, rgba(249,65,68,1) 40%, rgba(87,117,144,1) 40%, rgba(95,127,139,1) 70%, rgba(144,190,109,1) 70%, rgba(128,168,113,1) 95%, rgba(249,199,79,1) 95%);
border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
top:-48px;
left:0;
transition: .2s;
}
.egg:before, .egg:after, .egg-top:before, .shell:before {
content:"";
position: absolute;
border-style: solid;
}
.egg:before {
border-color: transparent transparent #f9c74f transparent;
border-width: 0 20px 20px 0;
top: -19px;
}
.egg:after {
border-color: transparent transparent #f9c74f transparent;
border-width: 0 0 20px 20px;
top: -19px;
left: 140px;
}
.egg-top:before {
border-color: #f9c74f transparent transparent transparent;
border-width: 20px 20px 0 20px;
top:120px;
}
.shell-top, .shell-top:before, .shell-top:after {
position: absolute;
border-style: solid;
border-color: #f9c74f transparent transparent transparent;
border-width: 20px 20px 0 20px;
}
.shell-top {
left:40px;
top:120px;
}
.shell-top:before, .shell-top:after {
content:"";
top:-20px;
}
.shell-top:before {
left:20px;
}
.shell-top:after {
left:60px;
}
.shell {
position: absolute;
z-index:-1;
}
.shell:before {
border-color: transparent transparent #f9c74f transparent;
border-width: 0 20px 20px 20px;
top:-19px;
left:20px;
filter: drop-shadow(40px 0 #f9c74f) drop-shadow(40px 0 #f9c74f);
}
.shell:after {
content:"";
position: absolute;
background-color: rgba(0,0,0,.1);
width:160px;
height: 40px;
border-radius:50%;
top:50px;
left:0;
}
.egg-top:after {
content:"";
position: absolute;
background-color: rgba(255,255,255,.2);
width:25px;
height:60px;
border-radius:50%;
transform: rotate(-27deg);
top:20px;
left:105px;
}Add grass and flowers:
.grass {
position: absolute;
}
.grass:before {
content:"";
position: absolute;
border-left: 8px solid #90be6d;
border-top: 1px solid #90be6d;
border-top-left-radius: 100%;
width: 40px;
height: 60px;
top:30px;
left:130px;
filter: drop-shadow(20px -5px #90be6d) drop-shadow(-120px -5px #90be6d);
}
.grass:after {
content:"";
position: absolute;
border-right: 6px solid #90be6d;
border-top: 1px solid #90be6d;
border-top-right-radius: 100%;
width: 30px;
height: 50px;
top:30px;
left:90px;
filter: drop-shadow(20px -5px #90be6d) drop-shadow(-120px -5px #90be6d);
}
.daisy {
position: absolute;
border-right: 7px solid #90be6d;
border-top: 2px solid #90be6d;
border-top-right-radius: 100%;
width: 40px;
height: 110px;
top:50px;
left:-15px;
}
.daisy:before, .daisy:after {
content:"";
position: absolute;
background-color: white;
border-radius:10px;
}
.daisy:before {
width: 60px;
height:10px;
top:-10px;
left:-25px;
}
.daisy:after {
height:60px;
width:10px;
top:-35px;
}
.flower, .flower:before {
position: absolute;
background-color: white;
border-radius:10px;
}
.flower {
width:60px;
height:10px;
left:-25px;
top:-10px;
transform: rotate(45deg);
z-index:2;
}
.flower:before {
content:"";
width:60px;
height:10px;
left:0;
transform: rotate(90deg);
}
.flower:after {
position: absolute;
content:"";
border-radius:50%;
background-color: #f9c74f;
width:10px;
height:10px;
top:0;
left:25px;
}
.back-flower {
position: absolute;
transform: scaleX(-1) scale(.7);
top:50px;
left:160px;
}Add transition on hover:
.easter-animation:hover .egg-top {
transform: translateY(-55px);
}Style and animate the chick:
.chick {
position: absolute;
background-color: #e9d8a6;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
width:130px;
height: 150px;
left:15px;
top:-10px;
z-index:-3;
}
.chick:before {
content:"";
position: absolute;
background-color: #333;
width: 7px;
height:10px;
border-radius:50%;
top:50px;
left:50px;
box-shadow: 25px 0 #333;
transform-origin: 50%;
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% {transform: scale(1, .05);}
5%, 95% {transform: scale(1, 1);}
}
.beak {
position: absolute;
border-color: transparent transparent #ee9b00 transparent;
border-width: 0 25px 30px 25px;
border-style: solid;
left:40px;
top:50px;
}
.beak:before {
content:"";
position: absolute;
border-color: #d48a00 transparent transparent transparent;
border-width: 20px 20px 0 20px;
border-style: solid;
top:29px;
left:-19px;
}Style the text:
.text {
position: absolute;
top:170px;
width:100%;
text-align: center;
color: white;
font-family: Brush Script MT;
font-size:20px;
}Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you:
