Chain keyframes animations

Question

Hello I'am trying to chain two animations. Now what happens is that after moveUp finished, my triangle jump back to place and then starts scaleDown. Why triangle jumps back when i specify forwards parametr which tells it should stop at last keyframes option. I have no idea what goes wrong here.

#bottom-rect {
  animation: moveUp 2s forwards, scaleDown 1s 1s forwards;
}

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

@keyframes scaleDown {
  0% {
    transform: scaleY(1);
    transform-origin: center;
    transform-box: fill-box;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center;
    transform-box: fill-box;
  }
}

The effect i need to achieve is basically this: 0sec (moveUp starts) -> 1sec (scaleDown starts) -> 2s both finished.

user_6109554 · Answer

It's actually possible to do additive animations in CSS. In this case you can just add an element around your path tag. So with an svg we can add an additional g tag that I will name animation2 in my example.

#bottom-rect {
  animation: scaleDown 1s 1s forwards;
}
#animation2{
  animation: moveUp 2s forwards;
}

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

@keyframes scaleDown {
  0% {
    transform: scaleY(1);
    transform-origin: center;
    transform-box: fill-box;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center;
    transform-box: fill-box;
  }
}

Chain keyframes animations

1 Answers