Question

我有简单的 css动画，它在除safari之外的所有浏览器中都运行良好，我尝试了stackoverflow的所有解决方案但是我没有想法，任何人都能看到可以解决这个问题的东西？

.marquee {
  position: relative;
  box-sizing: border-box;
  -webkit-animation: marquee linear infinite;
  -moz-animation: marquee linear infinite;
  animation-duration: 35s;
  padding-bottom: 50px;
  padding-top: 150px;
}

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

Answer 1

CSS代码中存在几个问题：

你需要在没有供应商前缀的情况下指定动画速记（注意它需要在固定的之后声明）
您错过了animation-duration声明
您需要将@keyframe at-rule与供应商前缀和相应的前缀添加到需要它们的属性上（在您的情况下为transform）。

.marquee {
  position: relative;
  box-sizing: border-box;
  -webkit-animation: marquee linear infinite;
     -moz-animation: marquee linear infinite;
          animation: marquee linear infinite;
  -webkit-animation-duration: 35s;
     -moz-animation-duration: 35s;
          animation-duration: 35s;
  padding-bottom: 50px;
  padding-top: 150px;
}

@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(0, -100%); }
}
@-moz-keyframes marquee {
  0%   { -moz-transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -100%); }
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
}

<div class="marquee">test</div>

更多信息：

CSS3 Transition Safari发布了所有添加的前缀

1 个答案: