CSS: Animating a Rainbow Heart from a Square
CSS: Creating a Rainbow Heart Animation from a Square
We can use HTML, CSS, and JavaScript together to create animations and implement them on web pages or websites. CSS offers many properties that we can use to create animations, which is why it’s recommended for styling, as it’s incredibly helpful for front-end development.
In this article, we’ll use CSS to create a heart that changes color every three seconds. This will be done in two steps using some animation.
Steps to Creating a Rainbow Heart
We’ll create two different sections for the main body, then create two classes: one for the square and the other for the container. We’ll also create the CSS section where we’ll add some properties to the main body and then center all the content we want to display. We’ll use the following code to create the container.
Example
In the following example, we add some properties and create the heart shape within which our animation will play. The following code shows the output of the HTML and CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating the container</title>
<style>
.contain {
display: grid;
height: 99vh;
place-items: center;
}
.sqr {
height: 9rem;
width: 9rem;
background-color: blue;
transform: rotate(45deg);
} .sqr::before {
content: "";
height: 100%;
width: 99%;
background-color: red;
position: absolute;
transform: translateY(-50%);
border-radius: 49%;
}
.sqr::after {
content: "";
background-color: lightgreen;
position: absolute;
width: 99%;
height: 99%;
transform: translateX(-49%);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="contain">
<div class="sqr"></div>
</div>
</body>
</html>
Now the circles are different colors, we’ll keep it that way so we can distinguish between the different circles.
Now, we’ll animate this heart. To do this, we’ll add motion to the heart, and then we’ll change the color using keyframe properties. With each new frame, the heart’s color will change.
The motion of the created heart will change, forming a square and then back again to form a heart. We’ll accomplish this by using transform properties, so the square transforms into a heart. Now, we’ve completed our discussion of the method.
Example
In the following code, we first use the same code we used to create the container and heart shape. Then, we add some keyframes where we set the color from 0% to 100%. At each keyframe, the color changes, making it appear as if the square is transforming into a heart. Let’s look at the output so we can understand what’s happening after we apply this code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating the container</title>
<style>
.contain {
display: grid;
height: 99vh;
place-items: center;
}
.sqr {
height: 9rem;
width: 9rem;
background-color: gray;
transform: rotate(45deg);
animation: beater 3s linear infinite;
}
.sqr::before {
content: "";
height: 100%;
width: 99%;
background-color: maroon;
position: absolute;
transform: translateY(-50%);
border-radius: 49%;
animation: beater 3s linear infinite;
}
.sqr::after {
content: "";
background-color: yellow;
position: absolute;
width: 99%;
height: 99%;
transform: translateX(-49%);
border-radius: 50%;
animation: beater 3s linear infinite;
}
@keyframes beater {
0% {
background: red;
}
15% {
background: orange;
}
30% {
transform: scale(0.5);
background: yellow;
}
45% {
background: greenyellow;
}
60% {
background: blue;
}
75% {
background: indigo;
}
100% { background: violet;
}
}
</style>
</head>
<body>
<div class="contain">
<div class="sqr"></div>
</div>
</body>
</html>
Initially, our output will look like this: a square. Each frame will create the illusion that the square is transforming into a heart. After the transformation, it will loop again, becoming a square that changes color with each frame. The completed heart will look like this.
Finally, we can see a complete heart from a square.
Conclusion
Animations are very common on websites these days, and they are responsible for the actual look and feel of a website. The purpose of these animations is usually to engage the user or make something easier to understand. CSS is a very powerful tool, and these animations can be created with just a few lines of code. The animations contain frames, which we change using the keyframe property in CSS.
In this article, we learned how to use CSS to create an animated rainbow heart from a square that changes color every 3 seconds.