JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
    <div class="globale">
        <div class="anim"></div>
    </div>
</body>

CSS

body {
  padding: 20px;
  text-align: center;
}

.globale {
    position:reative;
    width: 100%;
}

.globale:before {
    content:"";
    display: block;
    height: 100%;
}

.anim {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url('http://diarypeople.fr/exemple.png') no-repeat 0 0;
    animation:effect 1s steps(9) infinite;
    background-size:100%;
    width:200px;
    height:200px;
}

@keyframes effect {
    from {background-position: 0 0%;}
    to {background-position: 0 100%;}    
}