CSS: задержка анимации только для одной анимации

Question

У меня сейчас есть 3 анимации, которые я называю так:

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

Есть ли способ, используя чистый CSS, задержать анимацию "opacity-out", пока не будет завершена анимация по радиусу?

Заранее спасибо!

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>