Newly availableNewly available. Verify your target environments before adopting.
Animation Newly available

Active view transition

The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.

Animation

Overview

The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:active-view-transition
125
125
144
18
125
18
DOM API
types

The types read-only property of the ViewTransition interface is a ViewTransitionTypeSet that allows the types set on the view transition to be accessed and modified.
125
125
147
18.2
125
18.2
ViewTransitionTypeSet

The ViewTransitionTypeSet interface of the View Transition API is a set-like object representing the types of an active view transition. This enables the types to be queried or modified on-the-fly during a transition.
125
125
147
18.2
125
18.2
@@iterator

[Symbol.iterator]
125
125
147
18.2
125
18.2
add
125
125
147
18.2
125
18.2
clear
125
125
147
18.2
125
18.2
delete
125
125
147
18.2
125
18.2
entries
125
125
147
18.2
125
18.2
forEach
125
125
147
18.2
125
18.2
has
125
125
147
18.2
125
18.2
keys
125
125
147
18.2
125
18.2
size
125
125
147
18.2
125
18.2
values
125
125
147
18.2
125
18.2
Other
css.selectors.active-view-transition-type

`:active-view-transition-type()`
125
125
147
18.2
125
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
:root:active-view-transition {
  background: #f0f0f0;
}
:root:active-view-transition-type(slide) {
  --transition-duration: 300ms;
}

Live demo

transitionmiddle. backgroundchange

CSS transitionmiddle. backgroundchange demo.

PreviewFullscreen

slide typetransition

CSS slide typetransition demo.

PreviewFullscreen

cross fade type

CSS cross fade type demo.

PreviewFullscreen

Use cases

  • Using Active view transition

    The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features