CSS view-transition-class Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The view-transition-class property lets authors specify one or more CSS class names that the UA will apply to an element for the duration of a view transition. Its purpose is to give a stable, author-controlled way to change the visual appearance of an element only while the page is being animated between states, without permanently mutating the element’s classes in the DOM. This makes it straightforward to tailor the transitional snapshots that the browser uses for cross-fade, shared-element, or other view-transition effects, so the animated representations can differ from the element’s normal runtime appearance.

Because those classes are applied only for the lifetime of the transition, they are useful for isolating transition-specific styling: you can tweak backgrounds, opacity, transform, filters, or pointer behavior for the transitional layer without affecting layout or interaction once the transition ends. In practice authors often combine transitional classes with standard motion properties such as transition and animation so that the visual changes introduced by the transitional classes are animated smoothly. The property is also frequently used alongside matching identifiers that link elements across views (for example, when coordinating shared-element transitions via view-transition-name) so that both ends of a visual match can receive the same transitional styling.

When designing transitional classes, favor non-layout-changing visual properties (transforms, opacity, filters) for the best performance and most consistent results: those are typically GPU-accelerated and compose well in the browser’s snapshot-based animation pipeline. Keep the classes focused and predictable - avoid introducing large reflows or script-driven side effects while a transition is active. Finally, treat the classes as ephemeral styling aids: they are applied by the UA only for the transition and removed automatically when the animation completes, so any permanent state changes needed after the transition should still be performed by your application logic.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.viewTransitionClass

Syntax

view-transition-class: <class-name>;

Values

<class-name>The name of a CSS class you want applied to the element only during a view transition. Multiple class names are allowed, separated by spaces.

Example

HTML

<div id="app" class="card"></div>



<script>

  const app = document.getElementById('app');

  let showingA = true;



  function render() {

    app.innerHTML = showingA ? `

      <div class="content">

        <h1>Gallery</h1>

        <p>Click to view details.</p>

        <button data-action="toggle">Open</button>

      </div>

    ` : `

      <div class="content">

        <h1>Details</h1>

        <p>More information about the selection.</p>

        <button data-action="toggle">Back</button>

      </div>

    `;

  }



  render();



  document.addEventListener('click', (e) => {

    if (!e.target.matches('[data-action="toggle"]')) return;

    // Use the View Transitions API to swap content

    if (document.startViewTransition) {

      document.startViewTransition(() => {

        showingA = !showingA;

        render();

      });

    } else {

      // Fallback when the API is unavailable

      showingA = !showingA;

      render();

    }

  });

</script>

CSS

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.card {
  width: 360px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(20, 23, 28, 0.08);
  overflow: hidden;
  background: white;
  /* Add a view-transition-class that will be present during the transition */
  view-transition-class: cross-fade;
}

.content {
  padding: 28px;
}

h1 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

p {
  margin: 0 0 16px 0;
  color: #445055;
}

button {
  appearance: none;
  border: none;
  background: #4677f5;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Target elements that participate in a transition using the view-transition-class name */
::view-transition-old(.cross-fade),
::view-transition-new(.cross-fade) {
  transition: opacity 360ms ease, transform 360ms ease;
}

::view-transition-old(.cross-fade) {
  opacity: 1;
}

::view-transition-new(.cross-fade) {
  opacity: 0;
  transform: translateY(8px) scale(0.995);
}

/* Optional: give the new content a subtle entrance when the transition finishes */
@supports(selector(::view-transition-old(.cross-fade))) {
  .content {
    transition: transform 220ms ease, opacity 220ms ease;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS view-transition-class property. Hover over a browser icon to see the version that first introduced support for this CSS property.