Apply transformation to CSS element after previous transformation ended - css

Question

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

Answer 1

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>

Answer 2

You can use something like this.
const box = document.getElementById('box');
const button = document.querySelector('button');
button.addEventListener('click', () =>{
box.classList.add('transform-1');
box.addEventListener('transitionend', () =>{
setTimeout(function (){
box.classList.add('transform-2');
},1000)
})
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
button{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box{
width: 5rem;
height: 5rem;
background-color: brown;
transition: all 1s linear;
}
.transform-1{
transform: scaleY(5);
}
.transform-2{
transform: translateY(-2000px);
}
<div class="box" id="box"></div>
<button>Click me</button>