JSFiddle - React, Tailwind, and code Playground
HTML
<li class="product">
<div class="image"><img src="http://elektronika.techtestbox.com/images/product.png"></div>
<span>Products</span>
</li>
CSS
.product .image img
{
animation:fadeOutRight 5s linear infinite;
-moz-animation: fadeOutRight 5s linear infinite;
-webkit-animation: fadeOutRight 5s linear infinite;
-o-animation: fadeOutRight 5s linear infinite;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}