Question

这是我使用的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">

Answer 1

正确的 animation 完整语法为：

@keyframes name |持续时间|定时功能|延迟| 迭代计数|方向|填充模式|播放状态

在你的例子中：

animation: movingImage infinite linear 2s infinite;

最后infinite不再是有效值，因为您之前已经声明了它。

正确的完整语法是：

animation: movingImage 2s linear 0s infinite normal none running;

或缩短版本：

animation: movingImage 2s linear infinite;

JsFiddle Demo

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">

为什么图像上的CSS动画不起作用？

1 个答案: