2

Есть 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>

http://codepen.io/DimaDolgoter/pen/evPbPg?editors=1100

1 ответ 1

2

Надо сократить анимацию на 1 кадр:

&:hover{
  animation-timing-function: steps(8);
}

@keyframes loader {
  100% { background-position: -485px 100%; }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.