No delay

Delay

Negative Delay

Staggered

Staggered w/ Negative Delay

Reverse Stagger

Reverse Stagger w/ Negative Delay

User Defined Delay

Animate simulataneously with no delay

Animate simulataneously with a delay

Animate simulataneously with a negative delay

Use a variable to create a stagger. The variable represents a bears' index

Use an offset to make the delays negative so that the elements retain stagger but don't stagger in

Use the total amount of bears to reverse the stagger

Use a negative coefficient to create a stagger in the opposite direction

Set custom delays with custom property scope

.bear {
  animation-delay: 0s;
}

.bear {
  animation-delay: 1s;
}

.bear {
  animation-delay: -0.5s;
}

.bear {
  animation-delay: calc(var(--index) * 0.1s);
}

.bear {
  /* 5 is the number of bears */
  animation-delay: calc((var(--index) - 5) * 0.1s);
}

.bear {
  animation-delay: calc((5 - var(--index)) * 0.1s);
}

.bear {
  animation-delay: calc(var(--index) * -0.1s);
}

.bear {
  animation-delay: calc(var(--delay) * -0.1s);
}
.bear:nth-of-type(even) {
  --delay: 2;
}
.bear:nth-of-type(odd) {
  --delay: 1;
}