Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Performant: GPU composited */ @keyframes slide { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Hint GPU compositing for complex animations */ .animated-card { will-change: transform; animation: slide 0.4s ease both; } /* Remove will-change after animation ends */ el.addEventListener("animationend", () => { el.style.willChange = "auto"; });
Result
Open