Question

我正在尝试显示一个元素，等待1秒，然后使用css3 transitions淡出元素。

这就是我所拥有的：

.el {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.el {
  opacity: 0;
  -webkit-animation-duration: 500ms;
  -webkit-animation-name: fadeout;
  -webkit-animation-delay: 1000ms;
  -moz-animation-duration: 500ms;
  -moz-animation-name: fadeout;
  -moz-animation-delay: 1000ms;
  animation-duration: 500ms;
  animation-name: fadeout;
  animation-delay: 1000ms;
}

我认为animation-delay是可行的方法，但是这样做，元素在1000ms后出现，而在1000ms后出现淡出。< / p>

知道如何推迟fadeout？

谢谢！

Answer 1

为什么不在动画片段中添加额外的延迟时间：

-webkit-animation-duration: 1500ms;

其中~66％（1000ms）的时间是延迟：

@-webkit-keyframes fadeout 
{
    0% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

请注意，我这次以此为例。您可以自己计算延迟百分比

jsFiddle

我希望这就是你的意思。

Answer 2

即使已经有正确的答案，让我列举一下您的选择。

你想要一个元素以不透明度1开始，并保持这样一秒钟。然后，你希望在0.5秒内将其淡化为0的不透明度。并且你希望它永远保持不透明度。

这里的问题是初始状态和最终状态是不同的，因此元素的基本状态不能同时（当然！）。

如果我们使基本状态不透明度为0，则问题出在开头。我们可以在nkmol解决方案中解决它。（立即开始动画。我们也可以将动画仅保留为不透明度变化的0.5s，并改变不透明度usiong animation-fill-mode：向后;

此外，您可以将基本元素设置为不透明度1.然后问题是使最终不透明度为0;可以设置动画填充模式：前锋;

如何在开始之前延迟CSS3转换？

2 个答案:

jsFiddle