DEV Community

Danial Habib

Posted on Dec 13, 2023

CSS Cake Animation

#webdev #ai #codenewbie

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create cake animation. To create this animation, we need HTML and CSS. This is intermediate-level CSS animation.

If you are looking for more such CSS projects to enhance your skills, you can check out this playlist here. This playlist consists of 50 + CSS animation tutorials. The difficulty of this project varies from easy to quite complex. This playlist is suitable for all kinds of learners who are interested in learning CSS.

Welcome to Learn with Daniel I'm Danial and on this channel, you'll find tutorials on HTML, CSS, and JavaScript, as well as creative UI/UX designs, CSS animations, and effects. Whether you're a beginner or an experienced developer, I hope you find my content helpful and enjoyable. My goal is to inspire and empower design-focused frontend developers & designers. Don't forget to subscribe to my channel and enable notifications by clicking the bell icon. That way, you'll be the first to know about new tutorials and resources as soon as they're released. #html #javascript #css #coding #frondend #htmlcss #javascriptprojects #programming #css #trend #viral #program #shortsvideo #shorts #youtubeshort

youtube.com

Video Tutorial:

If you are interested in watching a video tutorial rather than reading this blogpost, you can check out the video down below. Also, subscribe to my YouTube channel where I first new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before you start coding, let us take a look at the project folder structure. We build a project folder called CSS cake animation. Inside this folder, we have two files. These files are index.html and style.css.

HTML:

We begin with the HTML code. We created you with a class name container. Weep rap all the other elements inside this container.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cake Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container center">
      <div class="candle"></div>
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
    </div>
  </body>
</html>

CSS:

Next we shape, style, and position the elements using CSS. You also add animations to various shapes to complete the animation.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f1d632;
}
.container {
  height: 100vh;
  width: 31.25em;
}
.center,
.container * {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
.layer-1 {
  background-color: #367bd0;
  height: 7.5em;
  width: 21.87em;
  top: -7.5em;
  background-size: 1.56em 9.37em;
  background-position: 0 -1.25em;
  background-image: radial-gradient(
    circle at 0.78em 1em,
    #f5f5f5 1.25em,
    transparent 1.3em
  );
  animation: fall-1 8s infinite;
}
@keyframes fall-1 {
  20% {
    transform: translateY(35.62em);
  }
  100% {
    transform: translateY(35.62em);
  }
}
.layer-1:before {
  content: "";
  position: absolute;
  height: 1.25em;
  width: 100%;
  background-color: #f54597;
  bottom: 0;
}
.layer-1:after {
  content: "";
  position: absolute;
  height: 0.75em;
  width: 0.75em;
  background-color: #9a152b;
  border-radius: 50%;
  top: 2.81em;
  left: 1.87em;
  box-shadow: 3.12em 1.56em #f1663e, 5.31em -1em #f5e671, 9.37em 2.4em #9a152b,
    12.5em -1.56em #f1663e, 14.68em 0 #f5e671, 18.75em 1.56em #9a152b;
}
.layer-2 {
  height: 7.5em;
  width: 15.62em;
  background-color: #ff99b9;
  top: -7.5em;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3.12em,
    #ff4a83 3.12em,
    #ff4a83 6.25em
  );
  animation: fall-2 8s infinite;
}
@keyframes fall-2 {
  20% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(28.12em);
  }
  100% {
    transform: translateY(28.12em);
  }
}
.layer-3 {
  background-color: #9a202f;
  height: 7.5em;
  width: 9.37em;
  top: -7.5em;
  background-size: 1.56em 9.37em;
  background-position: 0 -1.25em;
  background-image: radial-gradient(
    circle at 0.78em 1em,
    #ffee8d 1.25em,
    transparent 1.3em
  );
  animation: fall-3 8s infinite;
}
@keyframes fall-3 {
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(20.62em);
  }
  100% {
    transform: translateY(20.62em);
  }
}
.layer-3:before {
  position: absolute;
  content: "";
  height: 0.93em;
  width: 100%;
  top: 3.12em;
  background-color: #ffee8d;
}
.layer-3:after {
  position: absolute;
  content: "";
  background-color: #f54597;
  height: 1.25em;
  width: 1.25em;
  border-radius: 50%;
  top: -1.25em;
  left: 0.37em;
  box-shadow: 1.87em 0 #f54597, 3.75em 0 #f54597, 5.62em 0 #f54597,
    7.5em 0 #f54597;
}
.candle {
  height: 3.12em;
  width: 0.75em;
  background-color: #3aa2cf;
  top: -3.12em;
  border-radius: 0.12em 0.12em 0 0;
  animation: fall-4 8s infinite;
}
@keyframes fall-4 {
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(13.12em);
  }
  100% {
    transform: translateY(13.12em);
  }
}
.candle:before {
  position: absolute;
  content: "";
  background-color: #f1af3f;
  height: 1.25em;
  width: 1.25em;
  margin: -0.25em;
  border-radius: 50% 50% 50% 0;
  top: -1.3em;
  transform: rotate(135deg);
  animation: flame 2s infinite;
}
@keyframes flame {
  50% {
    transform: scale(0.8) rotate(135deg);
  }
}

That’s it for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the download code button below. If you have any queries, suggestions, or feedback you can comment them below

Download Code