Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* CSS (in your stylesheet) */ /* .btn { transition: transform 0.3s ease, opacity 0.3s; } */ /* .btn.active { transform: scale(1.05); opacity: 1; } */ // jQuery triggers the CSS transition $('#cta-btn').on('click', function () { $(this).addClass('active'); }); // Listen for CSS transition end $('#cta-btn').on('transitionend webkitTransitionEnd', function () { console.log('CSS transition complete'); }); // Prefer CSS transition: toggle class instead of .animate() $('#menu-icon').on('click', function () { $('#nav-drawer').toggleClass('open'); // CSS handles the slide }); // Fall back to .animate() for runtime-computed values $('html, body').animate({ scrollTop: $('#target').offset().top }, 500);
Result
Open