Question

我正在使用延迟属性测试几个CSS动画的排序。它似乎没有工作。延迟不匹配。我不确定我可能做错了什么。有人可以帮忙吗？

这是我的代码笔：http://codepen.io/marineb/pen/RramrJ?editors=110。（此codepen已使用解决方案B更新）。

我正在Chrome中对此进行测试。

谢谢！

    .oo {
  width: 100%;
  text-align: center;
  height: 200px;
}

.logo {
  -webkit-animation-name: logo;
  -webkit-animation-duration: .5s;
}

.o--2 {
  background: pink;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 3s;
  -webkit-animation-duration: .5s;
}

.o--3 {
  background: yellow;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 7s;
  -webkit-animation-duration: .5s;
}

.o--4 {
  background: green;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 10s;
  -webkit-animation-duration: .5s;
}

@keyframes logo {
  0% {
    margin-top: 5270px;
  }
  10% {
    margin-top: 5270px;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes oo-2 {
  0% {
    margin-top: 5270px;
  }
  60% {
    margin-top: 5270px;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}

Answer 1

如果我理解你要实现的目标......你希望每个部分从底部飞入。

您获得了一个奇怪的结果，因为在运行动画之前，每个部分都没有边距。然后你会在延迟用完后立即给它一个很大的余量（它在页面上跳转），然后动画会使边距缩小。

要达到预期效果，您有两种选择。

A）在课堂上定义你的保证金，以便从一个巨大的余地开始。

B）使用：

-webkit-animation-fill-mode: both;

这有两件事。它使动画开始时的属性（在您的情况下为0％）在动画开始之前应用，并且延迟仍在倒计时。然后它也会使动画结束时的属性（100％）在动画结束后继续。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode。

此外，如果你打算让这些部分以大约60％的标记淡入，你需要添加不透明度：0到0％的关键帧，或者你需要将它添加到CSS类。出于同样的原因。

排序CSS关键帧动画不起作用

1 个答案: