Есть steps
. Нужно чтобы анимация останавливалась на последнем кадре.
.down .eye-icon img {
line-height: 2;
}
.down .cart-icon {
width: 60px;
height: 50px;
background: none;
}
.down .cart-icon:hover {
overflow: hidden;
/* Hide text */
background: url(https://pp.userapi.com/c837520/v837520666/2afd3/sUaXPHskJ0E.jpg);
animation-name: loader;
animation-timing-function: steps(9);
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 2s;
}
.down button {
background-color: transparent;
border: none;
}
@keyframes loader {
100% {
background-position: -545px 100%;
}
}
<div class="col-xs-12 down">
hover on pic
<button type="button" class="col-xs-3 cart-icon" onclick="cart.add('<?php echo $product['product_id']; ?>');"><img src="/catalog/view/theme/default/image/cart.png" alt=""> <!--<span class="hidden-xs hidden-sm hidden-md hidden"><?php echo $button_cart; ?></span>--></button>
</div>