Can transitions be triggered by JavaScript?

Question

Accepted Answer

Yes, transitions can be triggered by JavaScript. While CSS transitions usually respond to user interactions like `:hover` or `:focus`, you can also use JavaScript to change a property dynamically — when the property value changes, the transition runs automatically if defined in CSS. You define the transition in your CSS, and then use JavaScript to modify the element’s style or class. When the property value changes, the browser applies the transition smoothly. /* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transition: width 0.5s ease, background-color 0.5s ease;
}

.box.expanded {
  width: 200px;
  background-color: lightseagreen;
}

/* JavaScript */
const box = document.querySelector('.box');
box.addEventListener('click', () => {
  box.classList.toggle('expanded');
}); When the user clicks the box, JavaScript toggles the `expanded` class, causing the width and background color to transition smoothly. You can also apply transitions by changing inline styles directly with JavaScript. As long as the element has a transition defined, any property changes will animate smoothly. const box = document.querySelector('.box');
box.style.transition = 'transform 0.5s ease';
box.style.transform = 'scale(1.3)'; Here, the `transform` property is updated directly through JavaScript, and because a transition is set, it animates smoothly. Define transitions in CSS for cleaner separation between style and logic. Use JavaScript to trigger state changes by toggling classes or updating styles. Transitions only occur when a property’s value actually changes. JavaScript can control when, how, and under what conditions transitions happen. Use JavaScript-triggered transitions when you need fine-grained control, such as animating elements after a delay, in response to user input, or after loading dynamic content.

Can transitions be triggered by JavaScript?

Triggering CSS Transitions with JavaScript

Can transitions be triggered by JavaScript?

Triggering CSS Transitions with JavaScript

Scenario Questions

Follow-up Questions