So, you'd like to animate the display property

Animating the display property: A CSS revolution?

The CSS Working Group recently approved a proposal allowing animation and transitions of the display property—a significant development. This means we could smoothly animate transitions between, for instance, display: block and display: none.

This presents a unique challenge. Currently, setting display: none abruptly stops any running animations. Adding it back restarts them. The specification clarifies: setting display: none terminates animations; changing display from none to another value restarts them.

This seemingly paradoxical behavior initially suggested the proposal was unworkable. However, the key is that @keyframes will prioritize any display value other than none. This prevents none from interrupting or restarting the animation until it's fully completed.

Miriam's explanation (let's call these "toots," shall we?) clarifies the process: it's not about interpolating between block and none, but rather allowing block to remain active until the animation concludes, at which point none safely takes effect. The animation remains discrete; we're toggling between states after the animation finishes.

Robert Flack's example illustrates this:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

The initial frame prioritizes display: block, overriding display: none and allowing the animation to complete before none takes effect.

Miriam's Mastodon example uses transitions:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

.hide:hover {
  display: block;
  opacity: 1;
}

Here, display: none is initially set, removing the element from the document flow. On hover, the block value is prioritized, enabling the transition after the opacity transition completes.

While this is a significant advancement, much remains to be addressed. The interaction with multiple animations, infinite animations, reversed animations, etc., requires further consideration. Nevertheless, this is a groundbreaking step forward!

The above is the detailed content of So, you'd like to animate the display property. For more information, please follow other related articles on the PHP Chinese website!