CSS:只有一个动画的动画延迟

Question

我目前有 3 个动画，我这样调用它们:

animation: 225ms radius-in forwards, 
           75ms opacity-in forwards, 
          150ms opacity-out;

有没有办法使用纯 css 来延迟“不透明”动画，直到半径内动画完成？

提前致谢!

Answer 1

我在下面的最终动画中添加了 4 秒的延迟。出于可见性目的，我将每个动画的持续时间设置为 2 秒。

div {
  width: 200px;
  height: 200px;
  opacity: 0.3;
  background-color: darkgray;
  animation:2000ms radius-in forwards, 2000ms opacity-in forwards, 2000ms 4000ms opacity-out forwards;
}

@keyframes radius-in {
from { border-radius: 0; }
to { border-radius: 25px; }
}

@keyframes opacity-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes opacity-out {
from { opacity: 1; }
to { opacity: 0.3; }
}

<div></div>