CSS View Transition Pseudo-elements Explained
Blink28624 Sep 2025

CSS View Transition Pseudo-elements Explained

These sources provide a detailed, technical explanation of the View Transition API implementation within the Chromium web browser, focusing on how CSS pseudo-elements enable smooth animations. The first source explains that view transition pseudos (like ::view-transition-old() and ::view-transition-new()) are temporary, browser-synthesized overlays used to capture and animate visual snapshots of elements during state changes. The second, more extensive source describes the low-level C++ classes in the Blink rendering engine and the cc compositor that orchestrate this process, including the DocumentTransition class, which manages the lifecycle, snapshot capture, and pseudo-element creation, and the SurfaceAnimationManager in the Viz component, which handles the final, performant GPU-accelerated animation of the saved frames using specialized layers and directives. Together, the texts map the high-level CSS API to the complex, multi-process architecture of Chromium, explaining how old and new content are matched, isolated on the top layer, and composited for animation.


Episoder(391)

7 Blink View Transition Discovery and UA Stylesheet Generation

7 Blink View Transition Discovery and UA Stylesheet Generation

This document details how the Blink rendering engine manages the technical lifecycle of View Transitions by coordinating DOM updates with visual animations. Once a developer triggers a transition, the...

27 Jan 31min

6 Blink and Compositor Handshake in View Transitions

6 Blink and Compositor Handshake in View Transitions

The provided text explains the technical handshake between the Blink rendering engine and the compositor during a web view transition. To ensure visual continuity, the system captures a snapshot of th...

27 Jan 30min

Evolution of CSS: Working Group Drafts and Processes

Evolution of CSS: Working Group Drafts and Processes

The provided text outlines the operations and standardizing procedures of the W3C CSS Working Group, which manages the evolution of web presentation through a modular specification system. It details ...

27 Jan 38min

5 View Transition Mechanics: Pre-paint and Snapshot Coordination

5 View Transition Mechanics: Pre-paint and Snapshot Coordination

The provided text explains how the Blink rendering engine manages view transitions by utilizing a stable coordinate space known as the snapshot root. This mechanism ensures that animations remain cons...

27 Jan 27min

4 Blink View Transition Pseudo-Element Tree and Layout Integration

4 Blink View Transition Pseudo-Element Tree and Layout Integration

The provided text explains how the Blink rendering engine manages View Transitions by generating a temporary pseudo-element subtree to represent page changes. This system acts as an overlay, capturing...

26 Jan 39min

GEM Modern CSS Scroll Positioning and Visibility Specifications

GEM Modern CSS Scroll Positioning and Visibility Specifications

These sources detail the CSS and DOM specifications that govern how elements are positioned and animated when moved into a user's visible area. The documentation introduces scroll-padding and scroll-m...

25 Jan 33min

[GENERAL] Modern CSS Scroll Positioning and Visibility Specifications

[GENERAL] Modern CSS Scroll Positioning and Visibility Specifications

These sources collectively define the technical standards for how web browsers handle scrolling and element visibility. The documentation details the CSSOM View Module's specific algorithm for the scr...

25 Jan 30min

Modern CSS Scroll Positioning and Visibility Specifications

Modern CSS Scroll Positioning and Visibility Specifications

These sources collectively define the technical standards for scroll-into-view behavior within modern CSS specifications, covering how elements are positioned and animated when navigated to or targete...

25 Jan 38min

Populært innen Teknologi

romkapsel
rss-avskiltet
tomprat-med-gunnar-tjomlid
teknisk-sett
nasjonal-sikkerhetsmyndighet-nsm
energi-og-klima
rss-impressions-2
shifter
elektropodden
lydartikler-fra-aftenposten
fornybaren
hans-petter-og-co
smart-forklart
pedagogisk-intelligens
rss-alt-vi-kan
rss-ki-praten
rss-fish-ships
rss-tendencast-kunstig-intelligens-og-juss-2
rss-heis
rss-for-alarmen-gar