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

Question

Как развернуть анимацию, когда объект дошёл до конца страницы?

div {
  animation: MoveLeftRight 25s linear infinite;
  transition: transform .1s;
}

@keyframes MoveLeftRight {
  0%,
  100% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="ping" style="background-image: url(&quot;https://nervin.net/img/ping.gif&quot;); width: 23px; height: 44px; position: fixed; bottom: 0px;  left: px;"></div>

Answer 1

Для зеркального отображения элемента используйте scale() с противоположным знаком:

div.penguin {
  position: fixed;
  bottom: 0; left: 0;
  height: 44px; width: 23px;
  background-image: url('https://nervin.net/img/ping.gif');
  animation: MoveLeftRight 25s linear infinite;
}

@keyframes MoveLeftRight {
  0%, 100% { left: 0;    transform: translatex(-50%) scalex(-1); }
       49% { left: 100%; transform: translatex(-50%) scalex(-1); }
       50% { left: 100%; transform: translatex(-50%) scalex(1);  }
       99% { left: 0;    transform: translatex(-50%) scalex(1);  }
}

<div class="penguin"></div>

БЛОГ НА HUSL

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

Ответы (1 шт):