Timing CSS animation events

February 5, 2024

I’m having trouble figuring out how to time the execution of events. In this case, the div should slide down from the top, and then grow by 10%. I tried stacking the animations, as a best guess, but this doesn’t work.

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}
    
#theDiv {
  animation-name: slideDown grow;
  animation-duration: 3s 3s;  
  animation-fill-mode: forwards forwards;
  animation-timing-function: ease ease;
  transition-delay: 0s 3s;
  
  padding: 50px;
  background-color: yellow
}

<div id="theDiv">HELLO, WORLD!</div>

>Solution :

You can’t use transform atttibute with multiple animation. If you call both of animation "slideDown" and "grow", it only applying "grow" animation.

So if you want animate "grow" after "slideDown", merge both anmiation.

@keyframes stacked-anim {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

#theDiv {
  animation-name: stacked-anim;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  padding: 50px;
  background-color: yellow;
}

<div id="theDiv">HELLO, WORLD!</div>

If you animate different attributes, you can set multiple animation with comma.

@keyframes grow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes changeColor {
  0% {
    background-color: yellow;
  }
  100% {
    background-color: crimson;
  }
}

#theDiv {
  animation-name: changeColor, grow;
  animation-duration: 3s, 3s;
  animation-fill-mode: forwards, forwards;
  animation-timing-function: ease, ease;
  padding: 50px;
  background-color: yellow;
}