我想每 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) }
}
最佳答案
可以考虑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">
关于css - 如何切换 scaleX 以翻转没有动画的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54868579/