Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* GOOD: GPU-accelerated properties */ .good { transition: transform 0.3s ease, opacity 0.3s ease; } .good:hover { transform: translateY(-4px); opacity: 0.9; } /* AVOID: layout-triggering properties */ .bad { transition: top 0.3s, width 0.3s; /* triggers layout */ } /* Use will-change for complex transitions */ .heavy { will-change: transform; }
Result
Open