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)

CPU Stack Unpacked

CPU Stack Unpacked

CPU Stack

23 Loka 20251h 11min

R-Trees in Theory and Chromium Rendering

R-Trees in Theory and Chromium Rendering

The source provides an extensive overview of R-trees, which are hierarchical data structures designed for efficient spatial indexing, detailing their theoretical foundations and several variants like ...

22 Loka 202548min

Interactive Rebase in nvim

Interactive Rebase in nvim

These sources provide an extensive guide on executing a complete interactive Git rebase workflow entirely within the Neovim text editor. The process heavily relies on the vim-fugitive plugin for Git c...

19 Loka 202538min

Gerrit / git-cl (Chromium Development Workflow)

Gerrit / git-cl (Chromium Development Workflow)

The source provides a comprehensive guide to the Chromium development workflow, focusing on using Gerrit for code review and the command-line utility git cl (part of depot_tools). It details two prima...

19 Loka 202546min

FragmentPaintPropertyTreeBuilder::UpdateScrollAndScrollTranslation()

FragmentPaintPropertyTreeBuilder::UpdateScrollAndScrollTranslation()

The provided sources offer an extensive, line-by-line analysis of Blink’s rendering function, FragmentPaintPropertyTreeBuilder::UpdateScrollAndScrollTranslation(), which is critical for implementing s...

18 Loka 202532min

Simple Versus Easy in Programming

Simple Versus Easy in Programming

provided sources center on Rich Hickey's "Simple Made Easy" talk, which meticulously distinguishes between simple (objective, meaning "one-fold" or unentangled) and easy (subjective, meaning "near-at-...

16 Loka 202534min

CSS Keywords and Blink Rendering Engine

CSS Keywords and Blink Rendering Engine

These sources provide a detailed technical history of CSS keywords and features, tracing their evolution from the foundational CSS1 (1996), which introduced the box model and basic typography, through...

16 Loka 202553min

View Transitions

View Transitions

View transitions

16 Loka 202528min