Here is a pattern almost every frontend developer has written:



el.style.opacity = '0';
el.style.transform = 'translateY(8px)';
document.body.appendChild(el);

requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
});
});






Two requestAnimationFrame calls....