Не срабатывает анимация при наведении

Question

Знатоки! Проблема в том, что не понимаю, почему не срабатывает анимация при наведении, вроде всё сделал правильно

.vse_templates a {
    display: flex;
    width: 200px;
    color: #222;
}
.vse_templates svg {
    transform: rotate(180deg);
    margin-right: 10px;
    margin-top: 5px;
}
.prev-arrow:hover svg {
    animation: bounceleft 0.3s alternate ease infinite;
}

<div class="vse_templates next_templates_svg prev-arrow">
  <a href="/shop/">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="16" viewBox="0 0 40 16" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3638 6.89841L32.1121 1.45455L33.5153 0L39.1282 5.81818C39.6821 6.39242 39.9725 7.13905 39.9981 7.89062C40.0262 8.71442 39.7363 9.55148 39.1282 10.1818L33.5153 16L32.1121 14.5455L37.5048 8.95545H0V6.89841H37.3638Z" fill="#000"></path>
    </svg><span></span>Смотреть все</a>
</div>

Answer 1

Может так вы хотели?

.vse_templates a {
  display: flex;
  width: 200px;
  color: #222;
}

.vse_templates svg {
  transform: rotate(180deg);
  margin-right: 10px;
  margin-top: 5px;
}

.prev-arrow:hover svg {
  animation: bounceleft 0.3s alternate ease infinite;
}

@keyframes bounceleft {
  to {
    transform: translateX(-5px) rotate(180deg);
  }
}

<div class="vse_templates next_templates_svg prev-arrow">
  <a href="/shop/">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="16" viewBox="0 0 40 16" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3638 6.89841L32.1121 1.45455L33.5153 0L39.1282 5.81818C39.6821 6.39242 39.9725 7.13905 39.9981 7.89062C40.0262 8.71442 39.7363 9.55148 39.1282 10.1818L33.5153 16L32.1121 14.5455L37.5048 8.95545H0V6.89841H37.3638Z" fill="#000"></path>
    </svg><span></span>Смотреть все</a>
</div>

БЛОГ НА HUSL

Не срабатывает анимация при наведении

Ответы (1 шт):