JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div>
    
</div>

CSS

@-webkit-keyframes slide {
    from{
        background-position:0px 0px;
    }
    to{
        background-position:0px -350px;
    }
}
@-moz-keyframes slide {
    from{
        background-position:0px 0px;
    }
    to{
        background-position:0px -350px;
    }
}
@-o-keyframes slide {
    from{
        background-position:0px 0px;
    }
    to{
        background-position:0px -350px;
    }
}
@keyframes slide {
    from{
        background-position:0px 0px;
    }
    to{
        background-position:0px -350px;
    }
}

div {border:4px solid black; display: inline-block; width: 100px; height:250px; background:url(http://placekitten.com/200/600) no-repeat left top; 
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    
    -webkit-animation-name:slide; 
    animation-name:slide;
}
div:hover {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}