What happens if transition-duration is set to 0s?

Question

Accepted Answer

When the `transition-duration` property is set to `0s`, the transition occurs instantly — meaning there is **no visible animation** between the starting and ending states. The property value changes immediately. `transition-duration` defines how long a transition should take to complete. Setting it to `0s` disables the transition effect but still keeps the transition properties in place for future use. .box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transition: width 0s ease;
}

.box:hover {
  width: 200px;
} In this example, when you hover over the box, it instantly expands to 200px width — no smooth transition occurs. To temporarily disable transitions for specific states (e.g., on page load). To instantly reset an element’s state without visual delay. To conditionally control transitions through CSS class changes. If you set `transition-duration: 0s`, the browser recognizes a transition rule but executes it instantly. If you omit the transition entirely, there’s no transition rule at all. Functionally, both result in immediate property changes, but keeping `0s` can help maintain consistent CSS structure. .box.no-transition {
  transition-duration: 0s;
} You can use a `.no-transition` class to temporarily disable transitions — useful when programmatically changing styles or resetting animations. `transition-duration: 0s` means changes happen instantly. No animation is visible, but the transition rule still exists. It’s useful for toggling or disabling transitions temporarily.

What happens if transition-duration is set to 0s?

Understanding transition-duration: 0s in CSS

Scenario Questions

Follow-up Questions