CSS3 过渡 Safari 问题添加了所有前缀

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>

更多信息：

• CSS技巧文章：Keyframe Animation Syntax
• animation support table on canIuse
• 2d transfoms support table on canIuse