← Back to release summary

Display and content-visibility animations

Category
CSS
Type
New or changed feature
Status
In developer trial (Behind a flag) (Chrome 116)
Intent stage
Prepare to ship

Summary

Support specifying display and content-visibility in animations. This support allows for developers to create exit animations after which the element automatically becomes display: none or content-visibility: hidden without needing to write any javascript to handle that switch after the animation is finished. This allows exit animations for elements to be added purely in CSS.

Motivation

It has long been an ergonomic challenge that to animate the removal of some content you had to have a listener clean up the element after the animation finished. Also several new browser features such as <dialog> and popover implicitly switch to display none when they close. Being able to extend the non-none display in a CSS animation or transition allows for easy ergonomic exit animations without adding JS listeners.

Standards & signals

Samples: https://output.jsbin.com/buquher

Explainers: https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1318933547

View on chromestatus.com