CSS Animation 不适用于 Mac chrome，但适用于 iPad Chrome

Question

我有一个非常简单的动画，可以在 iPad 上的 safari 和 google chrome 上正常运行，但在我的 Mac 上的 google chrome 上却不行。我是 CSS 新手，我不确定为什么会发生这种情况。如果您能给我一些见解，那就太好了！ 这是我的 HTML 部分：

<div class="truck">
<img class="truck" src="deliver200x159.png" width="100px" height="80px"/>
<p id="deliver">We Do Delivery!</p>

这是我的 CSS 部分：

div.truck {
font-size: 1em;
font-weight: bold;
font-family: 'Indie Flower', cursive;
color: #FE93D7;
position: absolute;
top: 200px;
background-color: none;
-webkit-animation: running 10s infinite linear; 
     -o-animation: running 10s infinite linear;
    -ms-animation: running 10s infinite linear;
   -moz-animation: running 10s infinite linear;
animation-animation: running 10s infinite linear;
}

div.truck:hover{
 -webkit-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 -moz-animation-play-state: paused;
 animation-play-state: paused;
}

@-webkit-keyframes running {
  0%   {left: 0%;}
  100%  {left: 100%;}
}

@-o-keyframes running {
  0%   {left: 0%;}
  100%  {left: 100%;}
}

@-ms-keyframes running {
  0%   {left: 0%;}
  100%  {left: 100%;}
}

@-moz-keyframes running {
  0%   {left: 0%;}
  100%  {left: 100%;}
}

@keyframes running {
  0%   {left: 0%;}
  100%  {left: 100%;}
}

Answer 1

我猜你的 Mac chrome 版本已经去掉了-webkit- 前缀，看起来你的标准动画声明有点偏离。

这个：

animation-animation: running 10s infinite linear;

应该是：

animation: running 10s infinite linear;

编辑

在玩了更多之后，chrome 似乎不喜欢 running 动画名称。将其更改为不太通用的东西似乎可以解决问题。