为什么动画不能用于chrome？

Question

以下代码实现了一个类似于动画的选框，它只能在firefox上运行。它不适用于chrome。这可能是什么原因？以下是仅在firefox中显示的jsfiddle。

CSS：

/* define the animation */
@-webkit-keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
} 

@-moz-keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* define your limiting container */
.marquee {
  border: solid 2px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused
}

HTML：

<p class="marquee">
    <span>
    Hey ! What's up?
    </span>
</p>

在chrome中调试突出显示：

Answer 1

尝试添加-webkit-前缀，使其在webkit浏览器中运行。 Reference

/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  -webkit-animation: marquee 15s linear infinite; /* Chrome, Safari, Opera */
  animation: marquee 15s linear infinite; /* here you select the animation */
}

/* pause the animation on mouse over */
.marquee span:hover {
  -webkit-animation-play-state: paused /* Chrome, Safari, Opera */
  animation-play-state: paused
}

正如James Hunt所指出的那样，您可能需要在“transform”属性前加上-webkit-的前缀。

Answer 2

Haven目前尚未安装Chrome，但请记住将-webkit添加到所有CSS3功能的前缀以便兼容。

@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(-100%, 0); }
} 

编辑：对于您添加的错误，请使用上述内容。

/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
  -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

Answer 3

在“marque span”css定义中，将-webkit-前缀添加到animation属性中它是否可以在chrome和safari中使用