Question

尝试在Chrome和Firefox中使用此JSFiddle。这是代码：

（HTML）

<div class="slide-down">
  <h1>Hello!</h1>
</div>

（CSS）

.slide-down {
  font-size: 3em;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -moz-animation-name: slideDown;
  -webkit-animation-name: slideDown;
}
@-moz-keyframes slideDown {
  0% {
    -moz-transform:translateY(-300px);
  }
  100% {
    -moz-transform:translateY(0px);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-300px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

我的问题是它可以在Chrome中运行，但只有在动画div的起始坐标（动画的＆＃34; 0％＆＃34;点）位于视口内时才能在Firefox中使用。否则，它可以完全跳过动画。尝试将translateY（）参数更改为更保守的内容，例如-50px，它会起作用。这有解决方法吗？如果能够从屏幕外部输入内容而不必编写脚本来确定其初始y坐标应该是什么，那将是很好的。

Answer 1

我会考虑改为设置边距：

＆＃13;

.slide-down {
  font-size: 3em;
  animation:slideDown 3s forwards;
}
@keyframes slideDown {
  0% {
    margin-top:-300px;
  }
  100% {
    margin-top:0;
  }
}

＆＃13;

<div class="slide-down">
  <h1>Hello!</h1>
</div>

＆＃13;

当动画元素超出视口时，CSS动画会在Firefox中跳过

1 个答案: