JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>
CSS
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
@keyframes test {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(0%);
}
}