HomeCSSAnimationHappy Republic Day 2022 | CSS Animation

Happy Republic Day 2022 | CSS Animation

Hello everyone. Happy Republic Day to all of you. In today’s tutorial, we will create a special code to celebrate the 73rd Republic day of India. We will do that by creating an amazing Indian Flag animation. To create this animation, we need HTML and CSS.

Video Tutorial:

I have a video version of this tutorial on my youtube channel. So if you like to code along to the video tutorial, you can check out the video tutorial here down below. Also, I have another tricolour animation tutorial which you can check out here.

Project Folder Structure:

Let us create the project folder structure before we start coding. In order to do so, we create a project folder called – Happy Republic Day. Inside this folder, we have three files. These files are index.html, style.css and an image file. The index.html file is our HTML document while the style.css is our stylesheet.

HTML:

We start with the HTML code. Firstly copy the code below and paste it into your HTML document.

The HTML code consists of three divs’s. Each of them has a different class assigned to them. Following these div’s we have an image tag. We have used an Ashoka chakra PNG as the ‘src’ of the image tag. You can download this image along with the source code from down below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Happy Republic Day</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="clr-orange"></div>
    <div class="clr-white"></div>
    <div class="clr-green"></div>
    <img class="ashoka-chakra" src="ashoka chakra.png" />
  </body>
</html>

 

CSS:

Now let us style these divs and animation to them using CSS. Copy the code provided to you below and paste it into your stylesheet.
 
We start by setting the dimensions for each of the div. We set the height to 33.33vh and width to 0. Next, we assign a background for all three divs.
 
For all the three div’s we set an animation called ‘grow’. This increases the width of the div to 100vw at 100% of the keyframes.
 

Other Tutorials You Might Like:

 
The orange and green div scales from the left side since their ‘left’ property is set to zero. On the other hand, the white div scales from the right side, because its ‘right’ property, is set to zero.
 
Finally, we position the Ashoka chakra in the centre of the screen and apply an animation – ‘spin’ to it. We set the animation duration to 3 seconds and the delay to 2 seconds.
This completes our animation.
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #000000;
}
.clr-orange,
.clr-white,
.clr-green {
  height: 33.33vh;
  width: 0;
  position: absolute;
  animation: grow 2s forwards;
}
.clr-orange {
  background: linear-gradient(to bottom, #ff8011, #ffae4a);
  top: 0;
  left: 0;
}
.clr-white {
  background: #ffffff;
  top: 33.33vh;
  right: 0;
}
.clr-green {
  background: linear-gradient(to bottom, #75fc3b, #46ad1b);
  bottom: 0;
  left: 0;
}
@keyframes grow {
  100% {
    width: 100vw;
  }
}
.ashoka-chakra {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 0;
  animation: spin 3s 2s linear infinite;
}
@keyframes spin {
  0% {
    width: 30vmin;
  }
  100% {
    width: 30vmin;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Our animation is now ready. If you have any issues while creating this code download the source code by clicking on the download button below. Also, don’t forget to drop your queries suggestions and feedback in the comments below.

Happy coding!
RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

8 − 6 =

Most Popular