Question

我有这个CSS动画，当选择页面时，页面从底部滚动到顶部。

我遇到的问题是页面首先短暂显示在它的顶部位置，然后消失以从下到上滚动。如何在动画播放之前让页面不显示？

注意：我想保持短暂的动画延迟500毫秒

mainPanelContent.classList.add('slide-up-now');

.slide-up-now {
  -webkit-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
  -moz-animation: slide-up .6s  cubic-bezier(0.4, 0, 0.2, 1) 500ms;
  animation: slide-up .6s  cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}

@-webkit-keyframes slide-up {
        0% { -webkit-transform: translateY(100%); }
        100% { -webkit-transform: translateY(0); }
}

Answer 1

<强>解决方案：

此问题的正确解决方法是将animation-fill-mode设置为backwards（或使用如下的速记）：

animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;

<强>推理：

当延迟被添加到任何动画时，其执行将被暂停，直到该时间过去为止，在此期间，元素保持最初分配给它的任何位置。要让它从翻译位置开始，您必须手动将设置添加到元素（或）告诉UA为您执行此操作。

当我们将animation-fill-mode设置为backwards时，UA会自动将为动画第一次迭代的第一帧定义的属性值设置为延迟期间的属性，因此它将从您案件的翻译位置开始。

这是W3C Spec关于animation-fill-mode: backwards
的说法
在动画延迟定义的时间段内，动画将应用在关键帧中定义的属性值，这将启动动画的第一次迭代。这些是从关键帧的值（当动画方向是正常或交替时）或者到关键帧的值（当动画方向是反向或交替反向时）。

替代解决方案：

当然，您也可以通过向元素添加transform: translateY(100%来解决这个问题，但是当有特定属性来实现它时，它就没有意义了。

^{（我认为该元素最初在您的代码中没有transform: translateY(100%)。）}

为什么使用不透明度可能并不总是可接受的解决方案？

使用opacity的解决方案（正如您在自己的回答中所做的那样）没有错，但您会注意到opacity也会从0动画到1在动画过程中，这意味着内容会慢慢淡入视图而不是仅仅是向上滑动。虽然这也可以通过在两者之间添加额外的关键帧来解决，但这些只是通过使用单个属性可以实现的解决方案。

所有解决方案的示例：

在下面的代码段中，我为问题和所有可能修复的版本添加了示例。

＆＃13;

.slide-up-now {
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
.slide-up-now-fixed { /* preferred method */
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
}
.slide-up-now-fixed-initial-prop {
  transform: translateY(100%);
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
.slide-up-now-opacity {
  opacity: 0;
  animation: slide-up-opacity .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-up-opacity {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Just for demo */

div{
  display: inline-block;
  height: 100px;
  margin: 10px;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='slide-up-now'>Slide Up Now</div>
<div class='slide-up-now-fixed'>Fixed by Fill Mode</div>
<div class='slide-up-now-fixed-initial-prop'>Fixed by Initial Setting</div>
<div class='slide-up-now-opacity'>Fixed by Opacity</div>

＆＃13;

Answer 2

我得到了它：

.slide-up-now {
  opacity: 0;
  -webkit-animation: slide-up 1s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}


@-webkit-keyframes slide-up {
        0% { -webkit-transform: translateY(100%); opacity: 1 }
        100% { -webkit-transform: translateY(0); opacity: 1  }
}

注意：我故意做了opacity: 1两次。我根本不想要任何不透明效果，第一个不透明度1还不够。

CSS幻灯片向上动画元素在动画之前简要显示

2 个答案: