JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">Test</div>

CSS

.test {
    width: 100px;
    border: 1px solid grey;
    text-align: center;
}
.test:hover {
    -webkit-animation: fly 2s infinite linear;
    -moz-animation: fly 2s infinite linear;
    -o-animation: fly 2s infinite linear;
    animation: fly 2s infinite linear;
}
@-webkit-keyframes fly {
    0% {
        -webkit-transform: translate(0) scaleX(1);
    }
    0.01% {
        -webkit-transform: translate(0) scaleX(1);
    }
    49.99% {
        -webkit-transform: translate(300px) scaleX(1);
    }
    50% {
        -webkit-transform: translate(300px) scaleX(-1);
    }
    50.01% {
        -webkit-transform: translate(300px) scaleX(-1);
    }
    99.99% {
        -webkit-transform: translate(0) scaleX(-1);
    }
    100% {
        -webkit-transform: translate(0) scaleX(1);
    }
}