这是我正在使用的CSS代码：
img {
position: relative;
-webkit-animation: movingImage infinite linear 2s infinite;
animation: movingImage infinite linear 2s infinite;
}
@-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
@keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
还有我拥有的HTML：
<img src="image.png" width="50" height="50" alt="Image">
正确的animation完整语法为：
@keyframes名称| 持续时间 计时功能| 延迟| 迭代计数| 方向| 填充模式| 游戏状态
在您的示例中：
animation: movingImage infinite linear 2s infinite;
infinite正如您之前已经声明的那样，最后一个不再是有效值。
正确的完整语法为：
animation: movingImage 2s linear 0s infinite normal none running;
或简称：
animation: movingImage 2s linear infinite;
img {
position: relative;
-webkit-animation: movingImage 2s linear infinite;
animation: movingImage 2s linear infinite;
}
@-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
@keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}<img src="image.png" width="50" height="50" alt="Image">本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句