Запускать анимацию в обратном направлении без воссоздания ключевого кадра - PullRequest
Новая
       13

Запускать анимацию в обратном направлении без воссоздания ключевого кадра

1 голос
/ 01 мая 2019

Как запустить ключевой кадр назад без создания нового ключевого кадра?

Вот мой код, когда при наведении курсора на .container запускается анимация top-line. Я хочу бежать назад, когда мышь наведите контейнер. 

.container {
  display: flex;
  justify-content: center;
  background-color: black;
  width: 100%;
  height: 80px;
  margin-top: 100px;
}

.line {
  width: 50px;
  height: 4px;
  background: red;
}

.container:hover .line {
  animation: top-line .5s linear forwards;
}

@keyframes top-line {
  0% {
    transform: translate3d(0,0,0) scaleY(1) scaleX(1);
  }
  25% {
    transform: translate3d(0,-3px,0) scaleY(1) scaleX(1);
  }
  50% {
    transform: translate3d(0,20px,0) scaleY(.3) scaleX(1);
  }
  100% {
    transform: translate3d(0,20px,0) scaleY(.3) scaleX(8);
  }
}
<div class="container">
  <div class="line"></div>
</div>
...