Apply transformation to CSS element after previous transformation ended

I am trying to chain together 2 transforms, but I want the 2nd one to begin after the 1st one ends.

This is how I am trying to do it:

.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width:20px;
  transition: transform  5s;
  transition-timing-function: linear;

  }
.trailingNote-moveUp{
  transform: scaleY(10) translateY(-200px);
}

Basically, I want the element to be scaled by 10 on the y axis, then, after scaleY ends, start translateY(-200px) to move the scaled element up.

Link to CodePen: https://codepen.io/Sederfo/pen/abqOoOP

>Solution :

Use CSS keyframes

function startAnimation() {
  var element = document.getElementById("x");
  element.classList.add("trailingNote-moveUp");
}
.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width: 20px;
}
 
.trailingNote:hover, .trailingNote-moveUp {
  animation: animate 5s linear forwards;
}


@keyframes animate {
  0% {
    transform: none;
  }
  50% {
    transform: scaleY(10);
  }
  100% {
    transform: scaleY(10) translateY(-200px);
  }
}
<div id="x" class="trailingNote">Note</div>
<button onclick="startAnimation()">Animate</button>

Leave a Reply