How to Animate Rainbow Heart from a Square using CSS ?

Last Updated : 27 Jul, 2021

In this article, you will learn how to make a magical heart using only CSS. Animations in CSS are a widely fascinating part of CSS. We will be creating a heart that changes color every 3 seconds. We will be creating the animation in two steps.

1. Building the heart: In this step we will be building the shape of the heart.

First we will create two divisions in the body, with the classes of square and container. Then, in style.css file, we will add some general body and class styling to make all the content centered. We will then create two circles using the :before and :after selectors and using the border-radius property for making it a circle.

This will create the shape of the heart that will be animated in the next step. The code below demonstrates the HTML and CSS code.

HTML File:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="square"></div> 
    </div> 
</body> 
  
</html> 

CSS File:

CSS

* { 
    margin: 0%; 
    padding: 0%; 
    box-sizing: border-box; 
} 
  
.container { 
    width: 100vw; 
    height: 100vh; 
    background-color: black; 
    display: grid; 
    place-items: center; 
    align-items: center; 
} 
  
.square { 
    width: 10rem; 
    height: 10rem; 
    background-color: orange; 
    position: relative; 
    transform: rotate(45deg); 
} 
  
/* Draw one of the circles */
.square::before { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background-color: green; 
    position: absolute; 
    border-radius: 50%; 
    transform: translateY(-50%); 
} 
  
/* Draw another of the circles */
.square::after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background-color: pink; 
    position: absolute; 
    border-radius: 50%; 
    transform: translateX(-50%); 
}

Note: As of now, two different colors are used for drawing the circles, so that you can understand better, but in the final program, we will take the same color for the two circles and square.

Output:

We can make circles of different colors so that they can be distinguished easily. If we make all the colors the same, the output would be as given below:

2. Animating the heart: In this step we add the animations of the heart.

We will use two sets of animation for the heart. One is the motion of the heart and the other is the changing of colors. We will be using keyframes for defining the animations. The colors of the heart will be defined in each of the keyframes as needed. This will toggle the colors of the heart throughout the course of the animation.

The motion of the heart when changing from a square to the heart can be added using the transform property in one of the keyframes. This will cause the transformation from a square to the heart shape.

Complete Program

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        * { 
            margin: 0%; 
            padding: 0%; 
            box-sizing: border-box; 
        } 
  
        .container { 
            width: 100vw; 
            height: 100vh; 
            background-color: black; 
            display: grid; 
            place-items: center; 
            align-items: center; 
        } 
  
        .square { 
            width: 10rem; 
            height: 10rem; 
            background-color: pink; 
            position: relative; 
            transform: rotate(45deg); 
            animation: beater 3s linear infinite; 
        } 
  
        .square::before { 
            content: ""; 
            width: 100%; 
            height: 100%; 
            background-color: pink; 
            position: absolute; 
            border-radius: 50%; 
            transform: translateY(-50%); 
            animation: beater 3s linear infinite; 
        } 
  
        .square::after { 
            content: ""; 
            width: 100%; 
            height: 100%; 
            background-color: pink; 
            position: absolute; 
            border-radius: 50%; 
            transform: translateX(-50%); 
            animation: beater 3s linear infinite; 
        } 
  
        /* Define the keyframes for the animation */ 
        @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="container"> 
        <div class="square"></div> 
    </div> 
</body> 
  
</html> 