JSFiddle - React, Tailwind, and code Playground

by Mitch Greer

HTML

<div></div>

CSS

div {
    background-color: azure;
    border: 1em double slategray;
    height: 200px;
    width: 200px;
}

.infinite {
    animation: test 2s infinite;
    -webkit-animation: test 2s infinite;
}

@keyframes test {
    
    0% {
        transform: translate(0, 0);
    }
    
    50% {
        transform: translate(-55px, 0);
    }
    
    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes test {
    
    0% {
        -webkit-transform: translate(0, 0);
    }
    
    50% {
        -webkit-transform: translate(-55px, 0);
    }
    
    100% {
        -webkit-transform: translate(0, 0);
    }
}

JavaScript

$(function(){
    $('div').addClass('infinite');
});