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

<>你可以考虑< /P>

img{
动画：翻转我2步（1）无限；
}
@关键帧翻转我{
50%{/*注意：这是50%而不是100%*/
转换：scaleX（-1）
}
}
/*不需要0%或100%的状态，因为默认情况下它们被设置为scaleX（1）*/

<代码> <代码> >你可以考虑

img{
动画：翻转我2步（1）无限；
}
@关键帧翻转我{
50%{/*注意：这是50%而不是100%*/
转换：scaleX（-1）
}
}
/*不需要0%或100%的状态，因为默认情况下它们被设置为scaleX（1）*/