Question

我在大学这个话题上是全新的，我是一个很大的业余爱好者。这段代码令我感到困惑，我必须在关键帧部分和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;
}

Answer 1

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

许多开发人员更喜欢同时设置供应商和无厂商的属性

See here：

@-webkit-keyframes slide {
    ...
}

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

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

上设置

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

1 个答案: