Как сделать анимацию стрелки css?

Question

[redesupar]

Хочу сделать анимацию кнопку согласно видео, но не получается.
подскажите как лучше сделать?

svg {
        width:50px;
  
    }
    .cases-link svg {
      transform: rotate(0deg);
      transition: transform .3s cubic-bezier(0.68, 0.9, 0.265, 2);
      /* transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 5); */
    }

    .cases-link:hover svg {
      transform: rotate(90deg);
    }
  <a href="#" id="cases" class="cases-link">
        <svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 126">
          <defs>
            <style>
              .b {
                fill: #000;
              }
            </style>
          </defs>
          <polygon class="b" points="112.65 -.17 0 -.17 0 13.52 103.67 13.52 .65 116.53 10.29 126.17 112.65 23.85 112.65 126.12 126.29 126.12 126.29 13.52 126.29 -.17 112.65 -.17"></polygon>
        </svg>
      </a>

Answer 1

[Станислав]

Можно попробовать через from to:

.element:hover {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

Comments

[redesupar]

что-то как то не то