Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Animating a rainbow heart from a square using CSS?
We can do animations using HTML, CSS, and JavaScript all together and can implement these on the webpage or the website. CSS provides lots of properties that we can use to create an animation which is why it is advised to use CSS for styling as it holds a lot of power for the front-end development.
In this article, we will be creating a heart which changes its color every 3 seconds using CSS and it will be done in two steps using some animations.
Steps to create the rainbow heart
We will create two different divisions for the body, and then create two classes one of which will be square and the other will be the container. We will also create the CSS section in which we will add some properties to the body and then center all the content that we are going to display. We will be creating the container using the following code.
Example
In the following example, we added some properties and created the shape of the heart in which our animation will play. Below code gives 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>
The circles are now of different colors and we are keeping them this way so that we can differentiate between the circles.
Now, we will be animating this heart. For that, we will be adding motion to the heart and then we will be changing the color by using the keyframes property. The color of the heart will change each time when a new frame appear.
The movement of the created heart will change to form a square and then change back again forming a heart. This, we will be doing by using the transform property so the square can transform into a heart shape. Now that we are done talking about the approach.
Example
In the following code we first, used the same code that we used for making the container and the shape of the heart and then added some keyframes in which we set colors from 0% till 100%. The color changes in every keyframe which makes it look like the square is transforming in to a heart. Let’s look at the output so that we can understand what is happening after we use the 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: grey;
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 looks like this, a square and then with every frame it will create an illusion that the square is transforming into a heart and then after transforming it will loop back again and become a square changing into a different color with every change of frame. The complete heart will look something like this.
Finally, we can see a full heart from a square.
Conclusion
Animations in websites are very common these days and these animations are responsible for the actual look and feel for the website. The purpose of these animations are generally either to attract the user or to make the user understand something easily. CSS is a very powerful tool which can create these animations with just a few lines of code. Animations contains frames between them and we use the keyframe property in CSS to alter the frames.
In this article, we learnt how to create an animated rainbow heart from a square using CSS that changes its color in every 3 seconds.
299 Views
