为什么我在图像上的 CSS 动画不起作用？答案

【问题标题】：Why is my CSS animation on the image not working?为什么我在图像上的 CSS 动画不起作用？
【发布时间】：2015-06-05 11:48:02
【问题描述】：

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

【问题讨论】：

尝试将动画规则改为movingImage 2s infinite linear;
谢谢，成功了！你介意解释一下发生了什么变化吗，我知道它与它可以采用的所有不同值有关，但我没有得到我必须使用它们的顺序。
在developer.mozilla.org/en-US/docs/Web/CSS/animation查看参数的顺序和数量

标签： html css animation

【解决方案1】：

正确的animation完整语法是：

@关键帧名称 |持续时间 |计时功能 |延迟 | 迭代次数 |方向 |填充模式 |播放状态

在你的例子中：

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

&lt;img src="image.png" width="50" height="50" alt="Image"&gt;

【讨论】：