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

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

css3转换

淡出该元素

以下是我所拥有的：

.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;
}

我原以为

动画延迟

是一个不错的选择，但这样做，元素在1000毫秒后出现，而不是在1000毫秒后淡出

你知道如何延迟淡出时间吗

---

谢谢

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

-webkit-animation-duration: 1500ms;

其中约66%（1000ms）的时间为延迟：

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

注意，我用这次作为例子。您可以自己计算延迟的百分比

---

---

我希望这就是你的意思。

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

-webkit-animation-duration: 1500ms;

其中约66%（1000ms）的时间为延迟：

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

注意，我用这次作为例子。您可以自己计算延迟的百分比

---

---

我希望这就是你的意思。

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

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

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

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

---

另外，您可以将基本元素设置为不透明度1。然后问题是将最终不透明度设置为0；这可以通过设置动画填充模式：forwards；

来完成，即使已经有了正确的答案，让我列举一下您的选项

您希望一个元素以1的不透明度开始，并像这样保持一秒钟。然后，您希望在0.5 s内将其淡入0的不透明度。您希望它永远保持在0的不透明度

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

如果我们将基本状态不透明度设为0，问题就在开始处。我们可以像在nkmol解决方案中一样解决它。（立即开始动画。我们也可以将动画仅保留在不透明度更改的0.5秒内，并使用动画填充模式更改不透明度：向后

---

另外，您可以将基本元素设置为不透明度1。然后问题是将最终不透明度设置为0；这可以通过设置动画填充模式：forwards；

@C-Link这是一个演示。是的。但我在演示中没有看到任何内容？@C-Link检查我更新的小提琴。我只制作了

-webkit-

动画作为示例。@很高兴我能提供帮助：）@C-Link这是一个演示。是的。但是我在演示中没有看到任何东西？@C-Link检查我更新的小提琴。我只做了

-webkit-

动画作为例子。@C-Link很高兴我能帮上忙：）