View-transition-name - CSS Property
Summary of characteristics of the view-transition-name property
noneDiscrète: during an animation, the view-transition-name property passes from one value to another without transition.Single: single value (no order).
(1) The animation of view-transition-name does not affect the ongoing transition.
Syntax diagram of view-transition-name.
view-transition-name property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the term id is a freely chosen identifier.
Description of the view-transition-name property.
The property view-transition-name facilitates the implementation of View Transition by associating an identifier with the elements that need to be animated
during the transition. Indeed, by default, the animation applies to the root of the document. The following examples allow you to visualize the usefulness
of this property.
No display transition. The new elements abruptly replace the old ones.
Click on the image to see the rendering.
Note, on a portable device there is always by default a small transition effect.
A 'fade' type view transition. In this case, applying the animation to the root element of the page (root) is not problematic:
elements that are not changed appear unchanged.
A more sophisticated view transition (rotation and fade). Applying this kind of animation to the root is not feasible.
The property view-transition-name defines identifiers that can be used to apply a different animation to specific elements, and not to apply
animation to the root.
/* Association of identifiers
with the title and image */
#title4 {view-transition-name:title4;}
#image4 {view-transition-name:image4;}
/* Application of animations
based on identifiers */
::view-transition-old(title4) {animation:zoom-old 2s;}
::view-transition-new(title4) {animation:zoom-new 2s;}
::view-transition-old(image4) {animation:rotation-old 2s;}
::view-transition-new(image4) {animation:rotation-new 2s;}
Note: on this page we also had to use the concept of transition type so that all animations do not start at the same time. The property view-transition-name
only allows you to define animations specific to each element, but all these animations start at the same time.
To read more information about view transitions in general, see the tutorial on view transitions.
Other pages related to view transitions.
Values for view-transition-name.
- view-transition-name: none;
This is the default value: no transition ID is associated with the element.
- view-transition-name: id;
idis an identifier chosen by the developer. The only prohibited values arenoneandauto. This identifier can be reused by the pseudo-elements::view-transition-new()and
::view-transition-old()for the definition of a specific animation on the element. - view-transition-name: auto; ⚠
A transition identifier is automatically generated, most of the time from the item's ID.
Introduced in level 2 of the specification, this value is not yet very well recognized.
- view-transition-name: initial; (
none) view-transition-name: inherit; view-transition-name: revert; view-transition-name: revertLayer; view-transition-name: unset;Links to the presentation of these different values:
initial,inherit,revert,revert-layer,unset.
Animation of the view-transition-name property.
The property view-transition-name, which only accepts non-numeric values, has an animation of the discrete type: abrupt transition
from one value to another.
Nevertheless, the result of an animation of this property is quite uncertain because view-transition-name only takes effect during a change on the page,
either as a result of a user action or through a Javascript code.
Access the view-transition-name property via a program
Changing the identifier of elements subject to a view transition.
In other words, change the value of view-transition-name in JavaScript. Two codes are given below: the first manipulates the array of styles, with
a syntax in kebab-case, the second uses a syntax closer to JavaScript object syntax (the property name is written in camel-case).
let el = document.getElementById('id');
el.style['view-transition-name'] = 'example';
// or
let el = document.getElementById('id');
el.style.viewTransitionName = 'example';
Retrieving the value of view-transition-name with Javascript.
The property must have been applied directly to the element itself via its style attribute, and not through a CSS selector.
Here too, two syntaxes are possible. By the way, this code is the mirror of the previous one.
let el = document.getElementById('id');
let value = el.style['view-transition-name'];
// or
let el = document.getElementById('id');
let value = el.style.viewTransitionName;
Retrieval of the computed value of view-transition-name}.
The computed value is the one that results from the cascade of inheritance: the value applied to the element via its style attribute or a
CSS selector, if it is inherit, the value inherited from one of the parents, or failing that the initial value of the property (none
in the case of view-transition-name). The computed value is defined in all cases.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('view-transition-name');
Changing the value of view-transition-name with JQuery.
JQuery also offers two syntaxes to modify the value of view-transition-name.
$('#id').css('view-transition-name', 'example');
// or
$('#id').css('viewTransitionName', 'example');
Retrieving the calculated value of view-transition-name with JQuery.
And a syntax to retrieve the calculated value, much more compact than that of Javascript.
let value = $('#id').css('view-transition-name');
Other code examples.
Other examples of Javascript and JQuery code regarding the manipulation of CSS styles are given on the page Javascript and CSS.
Test yourself.
The buttons below apply the entered value to the property view-transition-name and then display either the value as it was applied, or the computed value.
In the case of this property, there will be no difference.
Browsers compatibility with view-transition-name.
Display transitions are well recognized by all recent browsers. Nevertheless, from one document to another, there are still incompatibilities.
view-transition-name which allows applying a view transition to something other than the root (:root).Notes:
(1) Disabled by default. Can be enabled by setting the flag dom.viewTransitions.enabled to TRUE.
in the page
from one page to another
view-transition-nameproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Chrome
Edge
Firefox
Opéra
Chrome pour Androïd
Safari sur IOS
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the view-transition-name property.
-
CSS View Transitions Module Level 1
This specification module describes view transitions within the same document. View transitions allow an animation to be introduced when part of the page is modified.
Regardingview-transition-name. First definition of view transitions, and introduction of theview-transition-nameproperty.
October 25, 2022Working Draft.
September 05, 2023Candidate Recommendation.
-
CSS View Transitions Module Level 2
This specification module extends the notion of view transition described in level 1 to the transfer from one document to another.
Regardingview-transition-name. No change to theview-transition-nameproperty.May 16, 2024Working Draft.
See also, regarding view transitions.
The specification that defines view transitions is called CSS View Transitions Module.
Many other concepts are also described in this same specification.
Selectors: