Question

正如您在本演示中所看到的那样：

保证金立即开始动画。但是，直到第3个关键帧才定义它。因此，一旦第二个关键帧值完成动画，我希望它的动画开始。情况似乎并非如此，我正在努力理解原因。

我注意到，如果我在第二个关键帧中手动设置边距，它将按预期工作，但我似乎很奇怪我必须在那里定义它，因为它已经设置在关键帧之外。

.test {
  background-color: black;
  color: white;
  height: 60px;
  line-height: 60px;
  width: 400px;
  margin: 50px 0;
  text-align: center;
  animation: fadeOut 6s cubic-bezier(0,.27,.39,1) 2s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  30% {
    opacity: .5;
    max-height: 400px;
    background-color: blue;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0;
    margin: 0;
    background-color: red;
  }
}

Answer 1

虽然你是正确的，但你会认为它会提取初始值。

您正在构建的动画需要一个开始和结束。

以30％标记添加它，使边距为起始值，100％标记将启动动画。

以下内容应该可以为您提供所需的效果，同时修剪一些不需要的值

@keyframes fadeOut {
  0% {
    opacity: 1;
    width:400px;
    margin: 50px 0;
  }
  30% {
    opacity: .5;
    background-color: blue;
    margin: 50px 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    background-color: red;
    margin:0;
  }
}

为什么此前的边距在前一个关键帧结束之前有效？

1 个答案: