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

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之后淡出。

知道如何延迟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。

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

如果我们将基本状态的不透明度设为0，那么问题就出现在开头。我们可以用nkmol溶液来求解。（立即开始动画。我们也可以将动画只保留在不透明度变化的0.5秒，并使用动画填充模式更改不透明度：向后；

此外，还可以将基础元素设置为不透明度1。那么问题是使最终的不透明度为0；可以设置动画填充模式：向前；