.easter-animation {
  position: relative;
}

.egg {
  position: relative;
  width: 150px;
  height: 200px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(
    295deg,
    #ff595e 15%,
    #8ac926 15%,
    #8ac926 30%,
    #ff595e 30%,
    #ff595e 49%,
    #8ac926 49%,
    #8ac926 70%,
    #ff595e 70%
  );
  overflow: hidden;
  animation: bounce 1s linear infinite;
}

.egg:before,
.egg:after {
  position: absolute;
  content: "";
}

.egg:before {
  width: 200px;
  height: 100px;
  background-color: #1982c4;
  top: 160px;
  box-shadow: 0 -50px #ffca3a, 0 -65px #8ac926, 0 -90px #6a4c93, 0 -95px #ffca3a;
}

.egg:after {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background-color: #ffca3a;
  left: 90px;
  top: 75px;
  box-shadow: -40px 0 #ffca3a, 40px 0 #ffca3a, -80px 0 #ffca3a, -120px 0 #ffca3a;
}

.eyes {
  position: absolute;
  background-color: #333;
  border-radius: 50%;
  width: 20px;
  height: 30px;
  left: 90px;
  top: 120px;
  box-shadow: 20px 0 #333;
}

.eyes:before {
  position: absolute;
  content: "";
  background-color: #fff;
  width: 5px;
  height: 12px;
  border-radius: 50%;
  left: 12px;
  top: 10px;
  box-shadow: 20px 0 #fff;
}

.eyes:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #1982c4;
  top: -130px;
  left: -100px;
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-70px) translateX(30px);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0) translateX(30px) rotate(-10deg);
  }
  58% {
    transform: scale(1, 1) translateY(-7px) translateX(0);
  }
  65% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.shadow {
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100px;
  height: 20px;
  border-radius: 50%;
  left: 20px;
  top: 190px;
  animation: move 1s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0) scale(0.8);
  }
  30% {
    transform: translateX(0) scale(0.8);
  }
  50% {
    transform: translateX(30px) scale(0.7);
  }
  58% {
    transform: translateX(20px);
  }
  65% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.clouds {
  position: absolute;
  width: 500px;
}

.cloud1,
.cloud2,
.cloud3 {
  position: absolute;
  background-color: white;
  width: 100px;
  height: 25px;
  border-radius: 100px;
}

.cloud1:before,
.cloud2:before,
.cloud3:before {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  top: -20px;
  left: 20px;
  background-color: white;
  border-radius: 50%;
}

.cloud1 {
  top: -150px;
  z-index: -1;
  animation: clouds 2s linear infinite;
}

.cloud2 {
  top: -70px;
  opacity: 0.5;
  transform: scale(0.7);
  animation: clouds 1.8s linear infinite;
}

.cloud3 {
  top: -100px;
  opacity: 0.5;
  transform: scale(0.9);
  animation: clouds 1.5s linear infinite;
  z-index: -2;
}

@keyframes clouds {
  from {
    left: 500px;
  }
  to {
    left: -500px;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Fun Easter Egg Animation with Bouncing and Moving Clouds

This playful Easter animation brings a cartoon-style egg to life using only HTML and CSS. The scene features a bouncing egg with blinking eyes, a soft shadow underneath, and animated clouds gently drifting across the sky. It’s a cheerful, eye-catching animation perfect for seasonal web designs or festive pages.

The Animated Egg

At the center of the design is the Easter egg. Its shape is styled to look like a real decorative egg with a rounded top and bottom. The egg is filled with bright, colorful stripes that alternate between pink and green, making it feel festive and vibrant.

The egg isn’t static—it bounces in place. This motion is created by a looping animation that stretches and compresses the egg slightly as it moves up and down. The bouncing gives it a lively and energetic feel, almost like it’s hopping with joy.

Facial Details: Eyes and Decoration

The egg has a cute little face. Two black ovals act as the eyes, and each one includes a tiny white highlight to give it a shiny, expressive look. The design cleverly mirrors the second eye using a shadow effect, keeping the layout clean while making the face look symmetrical.

Above the eyes, there are decorative elements that make the egg feel more detailed. A line of small yellow circles spreads across the top area of the egg, mimicking a painted or sticker-like decoration that you’d often find on real Easter eggs.

The Bouncing Shadow

Beneath the egg is a soft oval shadow that grows and shrinks in sync with the bounce. As the egg moves upward, the shadow gets smaller. When the egg lands, the shadow stretches back out. This subtle effect adds realism by grounding the egg and giving the illusion of movement on a surface.

Floating Clouds in the Background

In the sky above the egg, three clouds gently float from one side of the screen to the other. Each cloud is made up of soft white shapes and rounded edges, with slight variations in size and transparency. These clouds move at different speeds to create a layered, natural look.

The animation makes the clouds slide from right to left in a continuous loop. Because they move at different paces, it adds a nice parallax-style depth to the scene.

Overall Animation Feel

The combination of the bouncing egg, blinking eyes, shifting shadows, and drifting clouds creates a full, animated scene—all using CSS. The animation loops smoothly, with no jerky transitions or abrupt stops. It feels light, fun, and perfect for web pages that want to bring a touch of holiday personality.

This layout is great for Easter promotions, greeting banners, or interactive seasonal greetings. Since it’s built without any JavaScript, it’s lightweight and performs well even on slower connections or mobile devices.

This animated Easter design is a joyful way to celebrate spring on your site. With just CSS and HTML, it adds color, motion, and character without needing any images or external files.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.