Search code examples
csscss-transforms

How can toggle scaleX to flip an image without animatoin

I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.

.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) }
}
Solution

  • You can consider steps()

    img {
  animation: flip-me 2s steps(2,jump-none) infinite;
}

@keyframes flip-me {
  to {
    transform: scaleX(-1)
  }
}
    <img src="https://picsum.photos/id/1069/200/300">