【问题标题】:CSS3 Transition Safari issue all prefixes addedCSS3 过渡 Safari 问题添加了所有前缀
【发布时间】:2015-12-09 20:53:53
【问题描述】:

我有简单的 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%); }
}

【问题讨论】:

  • 您正在测试哪个版本的 Safari?

标签: css safari css-animations


【解决方案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>

更多信息:

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-04-06
    • 2014-12-02
    • 1970-01-01
    • 2013-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多