Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Animating a rainbow heart from a square using CSS?
We can create visually appealing animations using CSS that transform shapes and change colors dynamically. CSS provides powerful animation properties that make it easy to create engaging visual effects on webpages.
In this article, we will create an animated rainbow heart that transforms from a square shape and cycles through different colors every 3 seconds using CSS keyframes and transforms.
Syntax
@keyframes animation-name {
0% { property: value; }
50% { property: value; }
100% { property: value; }
}
selector {
animation: animation-name duration timing-function iteration-count;
}
Method 1: Creating the Basic Heart Shape
We start by creating a heart shape using a square div with two pseudo-elements (::before and ::after) that form circular shapes. The square is rotated 45 degrees to form the bottom point of the heart
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
height: 100vh;
place-items: center;
background: #f0f0f0;
}
.heart {
height: 120px;
width: 120px;
background-color: red;
transform: rotate(45deg);
position: relative;
}
.heart::before {
content: "";
height: 100%;
width: 100%;
background-color: red;
position: absolute;
transform: translateY(-50%);
border-radius: 50%;
}
.heart::after {
content: "";
background-color: red;
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-50%);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="heart"></div>
</div>
</body>
</html>
A red heart shape appears in the center of the page, formed by a rotated square and two circular pseudo-elements.
Method 2: Adding Rainbow Animation
Now we add CSS keyframes to create the rainbow color transition and scaling effect. The heart cycles through rainbow colors and pulses in size
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
height: 100vh;
place-items: center;
background: #222;
}
.heart {
height: 120px;
width: 120px;
background-color: red;
transform: rotate(45deg);
position: relative;
animation: rainbowHeart 3s linear infinite;
}
.heart::before {
content: "";
height: 100%;
width: 100%;
background-color: red;
position: absolute;
transform: translateY(-50%);
border-radius: 50%;
animation: rainbowHeart 3s linear infinite;
}
.heart::after {
content: "";
background-color: red;
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-50%);
border-radius: 50%;
animation: rainbowHeart 3s linear infinite;
}
@keyframes rainbowHeart {
0% {
background-color: #ff0000;
transform: scale(1);
}
14% {
background-color: #ff8c00;
transform: scale(1.1);
}
28% {
background-color: #ffd700;
transform: scale(0.9);
}
42% {
background-color: #32cd32;
transform: scale(1.05);
}
57% {
background-color: #0080ff;
transform: scale(0.95);
}
71% {
background-color: #4b0082;
transform: scale(1.08);
}
85% {
background-color: #9400d3;
transform: scale(1.02);
}
100% {
background-color: #ff0000;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="heart"></div>
</div>
</body>
</html>
An animated heart appears that continuously cycles through rainbow colors (red, orange, yellow, green, blue, indigo, violet) while pulsing in size, creating a vibrant rainbow heart animation against a dark background.
Key Animation Properties
| Property | Description |
|---|---|
@keyframes |
Defines the animation sequence with percentage-based steps |
animation |
Shorthand property for all animation settings |
transform: scale() |
Changes the size of the element during animation |
background-color |
Changes the color at each keyframe step |
Conclusion
CSS animations provide a powerful way to create engaging visual effects like this rainbow heart. By combining transforms, color transitions, and keyframes, you can create smooth, eye-catching animations that enhance user experience.
442 Views
