Как зациклить анимацию в обратном направлении?
.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
такое можно сделать? Нужно, чтобы поезд развернулся и поехал в обратном направлении. Сам разворот могу сделать, но там в итоге получается много кода.
Существует ли оптимальный вариант?