Как можно переключать scaleX для переворачивания изображения без анимации - PullRequest
Новая
       5

Как можно переключать scaleX для переворачивания изображения без анимации

0 голосов
/ 25 февраля 2019

Я хочу переворачивать изображение мгновенно каждые 1000 мс.Я пытаюсь, но анимация делает то, что должна делать (постепенно переворачивать картинку).Если я смогу мгновенно перевернуть картинку, это даст представление о ходячей утке.Я знаю, что могу использовать setInterval (), но лучше делать это только в CSS. 

.duck {
    position: absolute;

    animation: flip-me;
    animation-duration: 1000ms;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes flip-me {
    0% { transform: scaleX(1) }
    100% { transform: scaleX(-1) }
}

1 Ответ

0 голосов
/ 25 февраля 2019

Можно считать steps()

img {
  animation: flip-me 2s steps(1) infinite;
}

@keyframes flip-me {
  50% { /*Pay attention: it's 50% not 100% !!*/
    transform: scaleX(-1)
  }
}

/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
...