JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>css backgorund position animation infinity</h2>

<div class="wide-box-hodler hdr loading"></div>

CSS

.hdr {
    -webkit-animation: gmkanimate 40s infinite linear;
    -moz-animation: gmkanimate 40s infinite linear;
    -ms-animation: gmkanimate 40s infinite linear;
    -o-animation: gmkanimate 40s infinite linear;
    animation: gmkanimate 40s infinite linear;
}
@keyframes gmkanimate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1440px 0;
    }
}
@-moz-keyframes gmkanimate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1440px 0;
    }
}
@-webkit-keyframes gmkanimate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1440px 0;
    }
}
@-ms-keyframes gmkanimate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1440px 0;
    }
}
.hdr {
    background-image: url("https://m1.behance.net/rendition/modules/145242509/disp/626839ec4d6eaaf7e3b0b3e2c1d94ccc.gif");
    border: 1px solid #eee;
    min-height: 50px;
}