JSFiddle - React, Tailwind, and code Playground

by mhmk

HTML

<div class="flag">
    <div class="flagwave"></div>
</div>

CSS

body {      
    background: #eeefff;
}

.flag {
    position: relative;
		margin:20px auto;
    height: 150px;
    width: 225px;   
		font-size: 62.5%;  
    font-family: Verdana; 
		background: url(http://mhmk.vatan-host.ir/mataleb3/Flag_of_Iran.svg.png);
    
    border: 3px solid #fff;
    
    -webkit-box-shadow: 0 0 2px 2px rgba(20,20,20,.1);
}

.flagwave {
    position: absolute;
    
    top: -3px;
    left: -3px;
    
    width: 231px;
    height: 156px;
    
    z-index: 2;

    background-image: 
        
        -webkit-gradient(
            linear, 
            0% 30%, 
            50% top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(90%,rgba(255,255,255,.3)), 
            color-stop(100%,rgba(255,255,255,0))),
        
        -webkit-gradient(
            linear, 
            50% 30%, 
            100% top, 
            color-stop(0%,rgba(224,225,225,0)), 
            color-stop(25%,rgba(225,225,225,.3)), 
            color-stop(50%,rgba(224,225,225,0)), 
            color-stop(80%,rgba(224,225,225,.3)), 
            color-stop(100%,rgba(224,225,225,0)));
    
    background-size: 200%;
    background-position: right;
    
    -webkit-animation-name: flagwave;
    -webkit-animation-duration: 14s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

    @-webkit-keyframes flagwave {
    
        0% {
            background-position: -400px 0px, -400px 0px, -400px 0px,-400px 0px;
        }
    
        100% {
            background-position: 800px 0px, 800px 0px, 800px 0px, 800px 0px;
        }
    }