Animated Indian flag using CSS

This tutorial is an Animated Indian flag using CSS. India is all set to celebrate its 71st Republic Day on January 26. CSS to explain how I managed to create an animated Indian flag in CSS. I promise no image, javascript, or jquery use.

Also read: How To Create a Simple Animation Movie Using HTML

Create Flag structure

I have created a main flag area. to define three-color. I have used three divs nested.

<div class="flag">
    <div class="saffron flag-item"></div>
    <div class="white flag-item"></div>
    <div class="green flag-item"></div>
    <div class="flag-wave"></div>
</div>

Create Ashok chakra

I have created a circle div to create Ashok chakra, also, I have 12 spans to create 24 spokes.

<div class="white flag-item">
    <div class="circle">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>
</div>

Create CSS

.flag {
    margin:30px auto;
    position: relative;
    width:250px;
    height:150px;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve3d;
    -webkit-transform-origin: 0 250px;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0de
    -webkit-animation-name: wave;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: cubic-bezier(0.1
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    perspective: 1000;
    transform-style: preserve3d;
    transform-origin: 0 250px;
    transform: translate3d(0, 0, 0) rotateZ(0deg) rotat
    animation-name: wave;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.16, 0.14,
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.flag:before {
    position: absolute;
    content: "";
    height: 400px;
    left: -5px;
    top: -3px;
    width: 8px;
    border-right: 1px solid #FFF;
    border-radius: 3px;
    background-color: #422;
    box-shadow: -3px 3px 8px 0px rgba(0, 0, 0, 0.4);
}
@-webkit-keyframes wave {
    0% {
        box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
    20% {
        box-shadow: 4px 5px 15px 0 rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
    40% {
        box-shadow: 4px 5px 20px 0 rgba(0, 0, 0, 0.4);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
    60% {
        box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
    80% {
        box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
    100% {
        box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0
    }
}
.white {
    background: #FFF;
}
.green {
    background: #006400;
}
.saffron {
    background: #F93;
}

/* Animation effect */

.flag-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, 0 -25%,
    background-size: 200%;
    -webkit-animation-name: air;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: cubic-bezier(0.1
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes air {
    0% {
        background-position: -200% 0px;
    }
    30% {
        background-position: -60% 5px;
    }
    70% {
        background-position: 70% -5px;
    }
    100% {
        background-position: 200% 0px;
    }
}

/* Ashok chakra rotate */

.circle {
    width:47px;
    height:47px;
    border:2px solid #000080;
    border-radius:50%;
    position:absolute;
    left:40%;
    -webkit-animation: circle 5s infinite;
    animation: circle 10s linear 2s infinite;
}
@-webkit-keyframes circle {
    from {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Also read: Top 10 HTML Awesome tags