Как исправить css анимацию?

Question

[Breeze1]

Ребят, кто разбирается хорошо в css анимациях, почему у меня баг происходит при ховере, стрелка пропадает, и выезжает сверху. Хотя должна сначала вниз уезжать, а потом сверху появляется.

Пример того как должно работать https://codepen.io/breeze8/pen/wveNpep

То что у меня по ховеру получилось https://codepen.io/breeze8/pen/BaZMJwm

Answer 1

[lagudal]

внимательно смотрим на кейфрейм

@keyframes scrolly {
  0% {
    transform: translate3d(0,-150%,0) rotateX(90deg) scale(0.5) skewX(3deg);
  }

т.е. у вас по hover на 0% сразу же выбрасывается на 150% по Y - т.е. вверх.
А надо начинать с неизмененной позиции
Быстрый пример - дальше поиграйтесь сами с процентами что вам там еще надо.