我将如何更正此代码，以便我想使用的幻灯片动画适用于所有浏览器？答案

【问题标题】：How would I correct this code so the the slide animation I want to use works on all browsers?我将如何更正此代码，以便我想使用的幻灯片动画适用于所有浏览器？
【发布时间】：2014-11-06 23:14:58
【问题描述】：

我在 uni 对这个话题很陌生，而且我是个业余爱好者。这段代码让我很困惑，我的关键帧部分和 webkit 一定有问题。

这是我的 HTML 代码：

<div class="stage">
<figure class="ball"></figure>
</div>

这是我想要为球设置动画的 CSS。

@-webkit-keyframes slide {
0% {
left: 0;
top: 0;
  }

50% {
left: 244px;
top: 100px;
}

100% {
left: 488px;
top: 0;
 }
}

.stage {
background: #fff;
border-radius: 6px;
border: solid 1px #551A8B;
height: 150px;
position: relative;
min-width: 538px;
margin-top:50px;
}

.stage:hover .ball {
animation: slide 2s ease-in-out .5s infinite alternate;
}

.ball {
background: #551A8B;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}

【问题讨论】：

标签： html css animation

【解决方案1】：

在某些浏览器上，css animation 可能需要供应商前缀。在您的情况下，您确实使用了 -webkit- 前缀。但是使用的时候需要在@keyframe和animation上都设置：

许多开发人员更喜欢同时设置 vendor 和 vendorless 属性

See here:

@-webkit-keyframes slide {
    ...
}

.stage:hover .ball {
    -webkit-animation: slide 2s ease-in-out .5s infinite alternate;

您在keyframe 上设置了前缀，但在animation 上没有设置

【讨论】：