Question

我有一个非常简单的动画，可以在iPad上使用Safari和谷歌浏览器，但不能在我的Mac上的谷歌浏览器上运行。我是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动画名称。将其更改为不太通用的东西似乎可以解决问题。

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

1 个答案: