CSS View Transition Pseudo-elements Explained
Blink28624 Syys 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.


Jaksot(389)

Blink Rendering Engine: Frame, Document, and View Lifecycle

Blink Rendering Engine: Frame, Document, and View Lifecycle

In the Blink rendering engine, LocalFrame, LocalFrameView, and Document form a specialized triad that manages the structure and display of web content. The LocalFrame acts as the primary controller fo...

8 Helmi 34min

Pixel Snapping in Blink's Paint Property Trees

Pixel Snapping in Blink's Paint Property Trees

Blink’s rendering engine utilizes paint property trees and snap offsets to balance high-precision layout with visual clarity. While the layout engine calculates positions using fractional units for ac...

8 Helmi 31min

Chromium Blink: Scroll-Triggered Animations on the Compositor Thread

Chromium Blink: Scroll-Triggered Animations on the Compositor Thread

This document explores the technical implementation of scroll-triggered animations within Chromium's Blink engine and compositor. Unlike traditional scroll-driven effects that track movement continuou...

6 Helmi 31min

Blink and Chromium: The JavaScript Execution Pipeline

Blink and Chromium: The JavaScript Execution Pipeline

This documentation provides a technical deep dive into Blink’s JavaScript execution pipeline, explaining how Chromium orchestrates the transition from HTML parsing to code evaluation. It details the r...

6 Helmi 31min

Evolution of CSS clip-path in Web Standards and Blink

Evolution of CSS clip-path in Web Standards and Blink

The provided text outlines the evolution and technical implementation of the CSS clip-path property, which allows developers to create non-rectangular regions for web content. It details how the stand...

6 Helmi 36min

Mastering Chained CLs in the Chromium Workflow

Mastering Chained CLs in the Chromium Workflow

In Chromium development, chained change lists (CLs) allow engineers to decompose massive features into a stack of smaller, dependent commits for easier code review. This workflow utilizes depot_tools,...

6 Helmi 38min

Blink’s LocalFrameView: Orchestrating the Rendering Pipeline

Blink’s LocalFrameView: Orchestrating the Rendering Pipeline

The LocalFrameView class serves as the primary engine for managing a document's visual viewport and orchestrating its rendering pipeline within the Blink engine. It functions as a critical bridge betw...

5 Helmi 40min

Chromium View Transitions: A Complete Implementation Deep-Dive

Chromium View Transitions: A Complete Implementation Deep-Dive

This technical documentation explains how Chromium implements View Transitions by coordinating four distinct architectural layers: Blink, the cc compositor, the Viz service, and CSS animations. It det...

5 Helmi 32min