时间戳

首页 > 解决方案 > 如何在没有动画的情况下切换 scaleX 来翻转图像

css - 如何在没有动画的情况下切换 scaleX 来翻转图像

问题描述

我想每 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) }
}

标签： csscss-transforms

解决方案

你可以考虑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">

推荐阅读