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(397)

cc::LayerTreeHost in Chromium's Compositor

cc::LayerTreeHost in Chromium's Compositor

The source provides an extensive technical explanation of the cc::LayerTreeHost class, which acts as the central main-thread component in the Chromium compositor architecture. It details how this comp...

20 Syys 202537min

cc:: Scheduler / SchedulerStateMachine

cc:: Scheduler / SchedulerStateMachine

Drives the frame loop on the compositor thread (BeginFrame → Animate → Commit → Draw), deciding when to ask Blink for a new frame or to draw with existing state.

20 Syys 202548min

Chrome Interactions Team: Key Class Reference

Chrome Interactions Team: Key Class Reference

The sources provide an extensive reference guide detailing the key classes and infrastructure involved in handling user interactions—specifically scrolling, gestures, and input—within the Blink and Ch...

20 Syys 202553min

Essential Unix, Git, and Development Commands

Essential Unix, Git, and Development Commands

This comprehensive reference document provides an essential overview of commands used in a Unix-like environment, primarily focusing on Linux/macOS command-line operations and the specialized workflow...

20 Syys 202541min

Chromium and Blink Developer Command Reference

Chromium and Blink Developer Command Reference

The collection of sources provides a comprehensive guide to developing within the Chromium project, focusing heavily on command-line tools and workflows essential for engineers, particularly those wor...

19 Syys 202543min

Chrome Interaction Systems: Scrolling, Animations, and Input

Chrome Interaction Systems: Scrolling, Animations, and Input

The source material provides a detailed examination of Chrome’s architecture and how it manages user interactions like scrolling, animations, and input handling to ensure web pages feel smooth and res...

19 Syys 202526min

The History of the Web

The History of the Web

The source provides an extensive transcript from a YouTube video titled "The history of the web (Chrome University 2019)," featuring a presentation by Chris Wilson from Chrome for Developers. Wilson o...

19 Syys 202526min

Chromium Blink Remote Linux Development Workflow

Chromium Blink Remote Linux Development Workflow

The source provides a comprehensive guide for experienced C++ developers on setting up a development workflow for Chromium's Blink rendering engine, specifically focusing on the core component within ...

19 Syys 202542min