CSS multiple animation with different delay [duplicate]

Question

According to MDN

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

is equivalent to

p {
  animation: 3s infinite alternate slidein;
}

---

Applying multiple animation on a same element can be achieved by:

<div></div>

@keyframes animScale{
    from{
        transform: scale(0.2, 0.2);
    }
    to{
        transform: scale(1, 1);
    }
}

@keyframes animOpacity{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

div{
    width: 200px;
    height: 200px;
    background: red;
    animation: animScale 2000ms ease-in-out infinite,
    animOpacity 2000ms ease-in-out infinite;
}

---

Is there a way I can write animation-delay into the property animation, so that I can have two animations starting from different time?

Answer 1

Add the delay after the easing (AKA timing-function) value.

div{
  width: 200px;
  height: 200px;
  background: red;
  animation: animScale 2000ms ease-in-out 1000ms infinite,
             animOpacity 2000ms ease-in-out 2000ms infinite;
  /* scale will start after 1s and opacity after 2s (1s after the scale)*/
}

the values being:

animation-name: name
animation-duration: 0
animation-timing-function: ease
animation-delay: 0
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://drafts.csswg.org/css-animations/#animation