Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
view transitions

8 Articles
{
,

}
Direct link to the article ::view-transition-image-pair
view transitions

::view-transition-image-pair

The CSS ::view-transition-image-pair pseudo-element is part of the View Transitions API that lets us select the “before-and-after” snapshots in a view transition.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}
…
Avatar of Geoff Graham
Geoff Graham on Jun 14, 2024
Direct link to the article ::view-transition-image-new
view transitions

::view-transition-image-new

The CSS ::view-transition-image-new pseudo-element is part of the View Transitions API that lets us select the “new” snapshot that is transitioned to in a view transition.

::view-transition-image-new(*) {
  animation-duration: 700ms;
}
…
Avatar of Geoff Graham
Geoff Graham on Jun 14, 2024 (Updated on Jun 17, 2024)
Direct link to the article ::view-transition-image-old
view transitions

::view-transition-image-old

The CSS ::view-transition-image-old pseudo-element is part of the View Transitions API that lets us select the “before” snapshot in a view transition.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}
…
Avatar of Geoff Graham
Geoff Graham on Jun 14, 2024 (Updated on Jun 17, 2024)
Direct link to the article ::view-transition-group
view transitions

::view-transition-group

The ::view-transition-group pseudo-element selects one or more containers that group the pieces of an individual view transition.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

See that transition-name identifier in the pseudo-element’s argument? That’s how we can select a particular view transition. View …

Avatar of Geoff Graham
Geoff Graham on Jun 12, 2024
Direct link to the article ::view-transition
view transitions

::view-transition

The CSS ::view-transition pseudo-element is the top-level — or “root” — containing all animated transitions defined as CSS view transitions on the page.

::view-transition {
  position: fixed;
  inset: 0;
}
…
Avatar of Geoff Graham
Geoff Graham on Jun 7, 2024 (Updated on Jun 10, 2024)
Direct link to the article view-timeline-name
view transitions

view-timeline-name

The CSS view-timeline-name property allows us to identify and reference an element we want to animate based on its scroll position when it enters the visible area (i.e., scrollport) of a scroll container (also called the “source”).

.element {
  view-timeline-name: 
…
Avatar of Geoff Graham
Geoff Graham on May 30, 2024
Direct link to the article view-transition-name
view transitions

view-transition-name

The CSS view-transition-name property uniquely identifies an element that can be used in a view transition.

card {
  view-transition-name: card-transition;
}

We give the element a name (i.e., <custom-ident) that we reference or set the property to none to …

Avatar of Geoff Graham
Geoff Graham on May 29, 2024 (Updated on Jun 14, 2024)
Direct link to the article Basic Multi-Page View Transition
view transitions

Basic Multi-Page View Transition

@view-transition {
  navigation: auto;
}

That goes right in your stylesheet and it’s the most basic of basic view transitions. The effect is a cross-fade between two pages.

The Chrome team had initially released a meta tag we could …

Avatar of Geoff Graham
Geoff Graham on Jan 15, 2024 (Updated on May 29, 2024)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top