0

Как зациклить анимацию в обратном направлении?

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
}
    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
      <img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
    
    </body>
    
    </html>

На @keyframes такое можно сделать? Нужно, чтобы поезд развернулся и поехал в обратном направлении. Сам разворот могу сделать, но там в итоге получается много кода.

Существует ли оптимальный вариант?

1 ответ 1

2

На @keyframes будет как то так:

@keyframes anime {
  0% {
    left: 0px;
  }
  50% {
    left: 450px;
    transform: rotateY(0deg);
  }
  55% {
    transform: rotateY(180deg);
    left: 450px
  }
  100% {
    left: 0px;
    transform: rotateY(180deg);
  }
}

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0;
  animation: anime 5s cubic-bezier(0, 0, 1, 1);
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="train" src="https://js.cx/clipart/train.gif">

</body>

</html>

вот хорошая статья про анимации

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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