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.
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
