India is a country full of diversity, People from different religions and castes happily live together. The proudest moment for every Indian is that our flag always flies high over other countries.
Our Indian flag, which is just not a piece of cloth, is our pride. The tricolor, or tiranga, symbolizes different features of our country. The saffron color signifies the courage and strength of the country, the middle part of white signifies peace, the 24-ringed Ashoka chakra signifies the truth, and the green flag signifies growth and green lands.
In this article, we will teach you step-by-step how to create a wave animation Indian flag using only HTML and CSS. We will design our Indian flag with the basics of HTML and CSS, with wave animation that looks like our flag movements are similar to those of the waves.
I hope you get some basic idea of what we are going to do in this article. We will be using advanced CSS properties to create animation inside our Indian flag.
Let’s start with a simple example of creating a basic structure for our Indian flag using HTML and CSS. But before that, let’s take a look at the live demo of the project.
Portfolio Website Live Demo:
Before diving into the code, let’s discuss some general concepts that we will be using in creating our Indian Flag Using HTML and CSS.
What is CSS Animation?
A CSS animation is an advanced property of the CSS that helps in changing the state of any element from its original state to another. we can change the shape, size, color, and position of the object.
Give an Example of CSS animation.
animation: 3s ease-in 1s infinite reverse both running slidein;
Creating the Structure using HTML:
First of all, we will create a block-level element using the div tag. We will create a main container with a class flag, which will act as the main frame of our flag. Then, inside our div tag, we will create a child div container, which will be used as small parts for creating our flag. We will be creating our flags in multiple parts to add the wave animation using CSS. There are 100 identical elements, each assigned the class “flag-part,” indicating individual segments or parts of the flag.
<div class="flag"> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> <div class="flag-part"></div> </div>
Styling Indian Flag :
Default Styling:
Using the body tag selector, we will first set the background color to “charcoal gray” on our webpage.
body {
background-color: #343434;
}
Styling Container:
Now using the class selector property, we will select the container class (.flag) and set the position relative to the body of the webpage. Using the left property, we will add a left space of 50%, and using the height and width properties, we will set the width of the container to 150 vh and the height of the container as 95 vh.
.flag {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 150vh;
height: 95vh;
}Styling Child element :
Now, using the class selector (.flag-part), we will set the width of each child element of our flag. Using the width property, we will set the width to 1%, a small width, and using the height property We will set the height to 100% of the container size. Now, using the background-image property, we will set the background to an Indian flag with a URL. We will now use the animation properties, and we will set the different animation properties.
Using the animation-duration property, we will set the animation duration, and using the timing function properly, we will add the ease-in-out animation in an infinite loop, and the direction will be alternate.
Now, when selecting child elements from 1–20, we will first set the left space to 1% for the first child element, and the animation delay time will be 100 milliseconds. It will slowly increase the left space and time as we increase the number of child elements in our project to produce a smooth wave transition..
.flag-part {
width: 1%;
height: 100%;
position: absolute;
top: 0;
background-image: url("https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg");
background-size: 150vh auto;
animation-duration: 2000ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.flag-part:nth-child(1) {
left: 0%;
background-position: 0% 0;
animation-name: bit-anim;
animation-delay: 100ms;
}
.flag-part:nth-child(2) {
left: 1%;
background-position: 1% 0;
animation-name: bit-anim;
animation-delay: 200ms;
}
.flag-part:nth-child(3) {
left: 2%;
background-position: 2% 0;
animation-name: bit-anim;
animation-delay: 300ms;
}
.flag-part:nth-child(4) {
left: 3%;
background-position: 3% 0;
animation-name: bit-anim;
animation-delay: 400ms;
}
.flag-part:nth-child(5) {
left: 4%;
background-position: 4% 0;
animation-name: bit-anim;
animation-delay: 500ms;
}
.flag-part:nth-child(6) {
left: 5%;
background-position: 5% 0;
animation-name: bit-anim;
animation-delay: 600ms;
}
.flag-part:nth-child(7) {
left: 6%;
background-position: 6% 0;
animation-name: bit-anim;
animation-delay: 700ms;
}
.flag-part:nth-child(8) {
left: 7%;
background-position: 7% 0;
animation-name: bit-anim;
animation-delay: 800ms;
}
.flag-part:nth-child(9) {
left: 8%;
background-position: 8% 0;
animation-name: bit-anim;
animation-delay: 900ms;
}
.flag-part:nth-child(10) {
left: 9%;
background-position: 9% 0;
animation-name: bit-anim;
animation-delay: 1000ms;
}
.flag-part:nth-child(11) {
left: 10%;
background-position: 10% 0;
animation-name: bit-anim;
animation-delay: 1100ms;
}
.flag-part:nth-child(12) {
left: 11%;
background-position: 11% 0;
animation-name: bit-anim;
animation-delay: 1200ms;
}
.flag-part:nth-child(13) {
left: 12%;
background-position: 12% 0;
animation-name: bit-anim;
animation-delay: 1300ms;
}
.flag-part:nth-child(14) {
left: 13%;
background-position: 13% 0;
animation-name: bit-anim;
animation-delay: 1400ms;
}
.flag-part:nth-child(15) {
left: 14%;
background-position: 14% 0;
animation-name: bit-anim;
animation-delay: 1500ms;
}
.flag-part:nth-child(16) {
left: 15%;
background-position: 15% 0;
animation-name: bit-anim;
animation-delay: 1600ms;
}
.flag-part:nth-child(17) {
left: 16%;
background-position: 16% 0;
animation-name: bit-anim;
animation-delay: 1700ms;
}
.flag-part:nth-child(18) {
left: 17%;
background-position: 17% 0;
animation-name: bit-anim;
animation-delay: 1800ms;
}
.flag-part:nth-child(19) {
left: 18%;
background-position: 18% 0;
animation-name: bit-anim;
animation-delay: 1900ms;
}
.flag-part:nth-child(20) {
left: 19%;
background-position: 19% 0;
animation-name: bit-anim;
animation-delay: 2000ms;
}Adding Styling in Remaining Child element:
Now, starting with the 21st child element, we will go up to 100 child elements. We have used 100 child elements to create different parts of our Indian flag with wave animation. Similarly to other child elements, this element has a left property, and the animation delay will slowly increase until the duration ends.
.flag-part:nth-child(21) {
left: 20%;
background-position: 20% 0;
animation-name: bit-anim;
animation-delay: 2100ms;
}
.flag-part:nth-child(22) {
left: 21%;
background-position: 21% 0;
animation-name: bit-anim;
animation-delay: 2200ms;
}
.flag-part:nth-child(23) {
left: 22%;
background-position: 22% 0;
animation-name: bit-anim;
animation-delay: 2300ms;
}
.flag-part:nth-child(24) {
left: 23%;
background-position: 23% 0;
animation-name: bit-anim;
animation-delay: 2400ms;
}
.flag-part:nth-child(25) {
left: 24%;
background-position: 24% 0;
animation-name: bit-anim;
animation-delay: 2500ms;
}
.flag-part:nth-child(26) {
left: 25%;
background-position: 25% 0;
animation-name: bit-anim;
animation-delay: 2600ms;
}
.flag-part:nth-child(27) {
left: 26%;
background-position: 26% 0;
animation-name: bit-anim;
animation-delay: 2700ms;
}
.flag-part:nth-child(28) {
left: 27%;
background-position: 27% 0;
animation-name: bit-anim;
animation-delay: 2800ms;
}
.flag-part:nth-child(29) {
left: 28%;
background-position: 28% 0;
animation-name: bit-anim;
animation-delay: 2900ms;
}
.flag-part:nth-child(30) {
left: 29%;
background-position: 29% 0;
animation-name: bit-anim;
animation-delay: 3000ms;
}
.flag-part:nth-child(31) {
left: 30%;
background-position: 30% 0;
animation-name: bit-anim;
animation-delay: 3100ms;
}
.flag-part:nth-child(32) {
left: 31%;
background-position: 31% 0;
animation-name: bit-anim;
animation-delay: 3200ms;
}
.flag-part:nth-child(33) {
left: 32%;
background-position: 32% 0;
animation-name: bit-anim;
animation-delay: 3300ms;
}
.flag-part:nth-child(34) {
left: 33%;
background-position: 33% 0;
animation-name: bit-anim;
animation-delay: 3400ms;
}
.flag-part:nth-child(35) {
left: 34%;
background-position: 34% 0;
animation-name: bit-anim;
animation-delay: 3500ms;
}
.flag-part:nth-child(36) {
left: 35%;
background-position: 35% 0;
animation-name: bit-anim;
animation-delay: 3600ms;
}
.flag-part:nth-child(37) {
left: 36%;
background-position: 36% 0;
animation-name: bit-anim;
animation-delay: 3700ms;
}
.flag-part:nth-child(38) {
left: 37%;
background-position: 37% 0;
animation-name: bit-anim;
animation-delay: 3800ms;
}
.flag-part:nth-child(39) {
left: 38%;
background-position: 38% 0;
animation-name: bit-anim;
animation-delay: 3900ms;
}
.flag-part:nth-child(40) {
left: 39%;
background-position: 39% 0;
animation-name: bit-anim;
animation-delay: 4000ms;
}
.flag-part:nth-child(41) {
left: 40%;
background-position: 40% 0;
animation-name: bit-anim;
animation-delay: 4100ms;
}
.flag-part:nth-child(42) {
left: 41%;
background-position: 41% 0;
animation-name: bit-anim;
animation-delay: 4200ms;
}
.flag-part:nth-child(43) {
left: 42%;
background-position: 42% 0;
animation-name: bit-anim;
animation-delay: 4300ms;
}
.flag-part:nth-child(44) {
left: 43%;
background-position: 43% 0;
animation-name: bit-anim;
animation-delay: 4400ms;
}
.flag-part:nth-child(45) {
left: 44%;
background-position: 44% 0;
animation-name: bit-anim;
animation-delay: 4500ms;
}
.flag-part:nth-child(46) {
left: 45%;
background-position: 45% 0;
animation-name: bit-anim;
animation-delay: 4600ms;
}
.flag-part:nth-child(47) {
left: 46%;
background-position: 46% 0;
animation-name: bit-anim;
animation-delay: 4700ms;
}
.flag-part:nth-child(48) {
left: 47%;
background-position: 47% 0;
animation-name: bit-anim;
animation-delay: 4800ms;
}
.flag-part:nth-child(49) {
left: 48%;
background-position: 48% 0;
animation-name: bit-anim;
animation-delay: 4900ms;
}
.flag-part:nth-child(50) {
left: 49%;
background-position: 49% 0;
animation-name: bit-anim;
animation-delay: 5000ms;
}
.flag-part:nth-child(51) {
left: 50%;
background-position: 50% 0;
animation-name: bit-anim;
animation-delay: 5100ms;
}
.flag-part:nth-child(52) {
left: 51%;
background-position: 51% 0;
animation-name: bit-anim;
animation-delay: 5200ms;
}
.flag-part:nth-child(53) {
left: 52%;
background-position: 52% 0;
animation-name: bit-anim;
animation-delay: 5300ms;
}
.flag-part:nth-child(54) {
left: 53%;
background-position: 53% 0;
animation-name: bit-anim;
animation-delay: 5400ms;
}
.flag-part:nth-child(55) {
left: 54%;
background-position: 54% 0;
animation-name: bit-anim;
animation-delay: 5500ms;
}
.flag-part:nth-child(56) {
left: 55%;
background-position: 55% 0;
animation-name: bit-anim;
animation-delay: 5600ms;
}
.flag-part:nth-child(57) {
left: 56%;
background-position: 56% 0;
animation-name: bit-anim;
animation-delay: 5700ms;
}
.flag-part:nth-child(58) {
left: 57%;
background-position: 57% 0;
animation-name: bit-anim;
animation-delay: 5800ms;
}
.flag-part:nth-child(59) {
left: 58%;
background-position: 58% 0;
animation-name: bit-anim;
animation-delay: 5900ms;
}
.flag-part:nth-child(60) {
left: 59%;
background-position: 59% 0;
animation-name: bit-anim;
animation-delay: 6000ms;
}
.flag-part:nth-child(61) {
left: 60%;
background-position: 60% 0;
animation-name: bit-anim;
animation-delay: 6100ms;
}
.flag-part:nth-child(62) {
left: 61%;
background-position: 61% 0;
animation-name: bit-anim;
animation-delay: 6200ms;
}
.flag-part:nth-child(63) {
left: 62%;
background-position: 62% 0;
animation-name: bit-anim;
animation-delay: 6300ms;
}
.flag-part:nth-child(64) {
left: 63%;
background-position: 63% 0;
animation-name: bit-anim;
animation-delay: 6400ms;
}
.flag-part:nth-child(65) {
left: 64%;
background-position: 64% 0;
animation-name: bit-anim;
animation-delay: 6500ms;
}
.flag-part:nth-child(66) {
left: 65%;
background-position: 65% 0;
animation-name: bit-anim;
animation-delay: 6600ms;
}
.flag-part:nth-child(67) {
left: 66%;
background-position: 66% 0;
animation-name: bit-anim;
animation-delay: 6700ms;
}
.flag-part:nth-child(68) {
left: 67%;
background-position: 67% 0;
animation-name: bit-anim;
animation-delay: 6800ms;
}
.flag-part:nth-child(69) {
left: 68%;
background-position: 68% 0;
animation-name: bit-anim;
animation-delay: 6900ms;
}
.flag-part:nth-child(70) {
left: 69%;
background-position: 69% 0;
animation-name: bit-anim;
animation-delay: 7000ms;
}
.flag-part:nth-child(71) {
left: 70%;
background-position: 70% 0;
animation-name: bit-anim;
animation-delay: 7100ms;
}
.flag-part:nth-child(72) {
left: 71%;
background-position: 71% 0;
animation-name: bit-anim;
animation-delay: 7200ms;
}
.flag-part:nth-child(73) {
left: 72%;
background-position: 72% 0;
animation-name: bit-anim;
animation-delay: 7300ms;
}
.flag-part:nth-child(74) {
left: 73%;
background-position: 73% 0;
animation-name: bit-anim;
animation-delay: 7400ms;
}
.flag-part:nth-child(75) {
left: 74%;
background-position: 74% 0;
animation-name: bit-anim;
animation-delay: 7500ms;
}
.flag-part:nth-child(76) {
left: 75%;
background-position: 75% 0;
animation-name: bit-anim;
animation-delay: 7600ms;
}
.flag-part:nth-child(77) {
left: 76%;
background-position: 76% 0;
animation-name: bit-anim;
animation-delay: 7700ms;
}
.flag-part:nth-child(78) {
left: 77%;
background-position: 77% 0;
animation-name: bit-anim;
animation-delay: 7800ms;
}
.flag-part:nth-child(79) {
left: 78%;
background-position: 78% 0;
animation-name: bit-anim;
animation-delay: 7900ms;
}
.flag-part:nth-child(80) {
left: 79%;
background-position: 79% 0;
animation-name: bit-anim;
animation-delay: 8000ms;
}
.flag-part:nth-child(81) {
left: 80%;
background-position: 80% 0;
animation-name: bit-anim;
animation-delay: 8100ms;
}
.flag-part:nth-child(82) {
left: 81%;
background-position: 81% 0;
animation-name: bit-anim;
animation-delay: 8200ms;
}
.flag-part:nth-child(83) {
left: 82%;
background-position: 82% 0;
animation-name: bit-anim;
animation-delay: 8300ms;
}
.flag-part:nth-child(84) {
left: 83%;
background-position: 83% 0;
animation-name: bit-anim;
animation-delay: 8400ms;
}
.flag-part:nth-child(85) {
left: 84%;
background-position: 84% 0;
animation-name: bit-anim;
animation-delay: 8500ms;
}
.flag-part:nth-child(86) {
left: 85%;
background-position: 85% 0;
animation-name: bit-anim;
animation-delay: 8600ms;
}
.flag-part:nth-child(87) {
left: 86%;
background-position: 86% 0;
animation-name: bit-anim;
animation-delay: 8700ms;
}
.flag-part:nth-child(88) {
left: 87%;
background-position: 87% 0;
animation-name: bit-anim;
animation-delay: 8800ms;
}
.flag-part:nth-child(89) {
left: 88%;
background-position: 88% 0;
animation-name: bit-anim;
animation-delay: 8900ms;
}
.flag-part:nth-child(90) {
left: 89%;
background-position: 89% 0;
animation-name: bit-anim;
animation-delay: 9000ms;
}
.flag-part:nth-child(91) {
left: 90%;
background-position: 90% 0;
animation-name: bit-anim;
animation-delay: 9100ms;
}
.flag-part:nth-child(92) {
left: 91%;
background-position: 91% 0;
animation-name: bit-anim;
animation-delay: 9200ms;
}
.flag-part:nth-child(93) {
left: 92%;
background-position: 92% 0;
animation-name: bit-anim;
animation-delay: 9300ms;
}
.flag-part:nth-child(94) {
left: 93%;
background-position: 93% 0;
animation-name: bit-anim;
animation-delay: 9400ms;
}
.flag-part:nth-child(95) {
left: 94%;
background-position: 94% 0;
animation-name: bit-anim;
animation-delay: 9500ms;
}
.flag-part:nth-child(96) {
left: 95%;
background-position: 95% 0;
animation-name: bit-anim;
animation-delay: 9600ms;
}
.flag-part:nth-child(97) {
left: 96%;
background-position: 96% 0;
animation-name: bit-anim;
animation-delay: 9700ms;
}
.flag-part:nth-child(98) {
left: 97%;
background-position: 97% 0;
animation-name: bit-anim;
animation-delay: 9800ms;
}
.flag-part:nth-child(99) {
left: 98%;
background-position: 98% 0;
animation-name: bit-anim;
animation-delay: 9900ms;
}
.flag-part:nth-child(100) {
left: 99%;
background-position: 99% 0;
animation-name: bit-anim;
animation-delay: 10000ms;
}Playing Animation Using Keyframes:
Keyframes is the CSS property that divides the element into frames, and we then change the style at different frame rates. Now using the keyframe property with bit-anim, we will start at 0%, and using the transform property, we will set the y-axis angle to 0 and the opacity of the flag to 1.
At 100%, we will use the transform property again to translate the flag 2% to the y-axis, and the visibility or opacity of the flag will decrease to 0.7 to create smooth, wavy animation in our flag.
@keyframes bit-anim {
0% {
transform: translateY(0) skewY(0deg);
opacity: 1;
}
100% {
transform: translateY(2%);
opacity: 0.7;
}
}The final output of our Indian flag :
Conclusion
I hope you get the idea of the project. We have simplified each step for you guys to easily understand the logic behind the wave animation in our flag. This is a very basic project; we just need to have a basic idea about CSS animation and child properties. I would personally suggest that you create this type of mini-project that helps you enhance your design skills.
If you like the project, don’t forget to follow our website, foolishdeveloper.com.
Author: Arun
