CODEWITHSUNDEEP
cssanimationsvgcss-animations
1haker
1haker

Reputation: 134

Chain keyframes animations

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;
  }
}
<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>

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

Upvotes: 2

Views: 229

Answers (1)

Furious Mountain
Furious Mountain

Reputation: 1543

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;
  }
}
<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<g id = "animation2">
  <path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
</g>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>

Upvotes: 1

Related Questions