DEV Community

Beginner Developer
Beginner Developer

Posted on • Originally published at

Create Animated India flag in HTML and CSS

Animated India Flag
Design a beautiful animated India Flag in HTML and CSS.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>India Flag</title>
    <link rel="stylesheet" href="style.css" >
    <div class="main-content">
        <div class="flag-stand"></div>
            <li class="orange"></li>
            <li class="white">
                <div class="ashoka-chakra-div">
                    <img src="ashoka-chakra.svg" alt="ashoka-chakra" class="ashoka-chakra">
            <li class="green"></li>
Enter fullscreen mode Exit fullscreen mode


    background-image: url(;
    background-size: cover;
    position: absolute;
    bottom: 9.2%;
    left: 45%;
    width: 10px;
    height: 350px;
    background: #587a0a;
    float: left;
    list-style: none;
    margin: 0;
    float: left;
    padding: 0;
    width: 180px;
    height: 35px;
    animation-name: stretch;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
@keyframes stretch {
    0% {
      transition: all 0.75s ease-in-out;
      width: 185px;
    50% {
      transition: all 0.75s ease-in-out;
      width: 195px;

    100% {
      transition: all 0.75s ease-in-out;
      width: 205px;
    background: #f96232;
    background: #fff;
    background: #006000;
    width: 35px;
    height: 35px;
    margin: 0 auto;
    animation: rotate 2s linear infinite;
    height: 100%;
    animation-delay: 9s;
@keyframes rotate{
        transform: rotate(0deg);
        transform: rotate(360deg);
Enter fullscreen mode Exit fullscreen mode

Blog:- Beginner Developer

Top comments (0)