xiry.

Development · Tip

Flickering Theme Switch with View Transitions and CSS linear()

CSS technique for flickering theme transitions using View Transitions and linear() curves

From the Xiry library · Updated 11 October 2026

This CSS tip explains how to create a light-flicker effect during theme toggles without writing complex custom keyframe animations. By assigning a custom CSS linear() timing function to the default ::view-transition-group(root) pseudo-element, the entire page flickers between light and dark modes naturally during the transition. It provides a simple, expressive pattern for playful UI interactions.

How it works

Core CSS:

[data-theme='light']::view-transition-group(root) {

animation-timing-function: var(--flicker);

}

Define --flicker as a CSS linear() timing function; the default root View Transition animation picks it up, so a theme change flickers the lights. Bonus from the demo: a draggable bulb switch to trigger the toggle.

What it's for

  • Add an expressive light-bulb flicker effect when toggling between dark and light themes
  • Customize default View Transition timing functions without rewriting entire keyframe sets
  • Create complex easing and bounce curves using CSS linear() for page-level state changes

Key points

  • Targets the default ::view-transition-group(root) pseudo-element
  • Uses CSS linear() easing curves to simulate light flickering
  • Eliminates the need for custom animation keyframes during theme changes
  • Pairs cleanly with interactive toggles like pull cords or bulb switches

Pricing

Free

Details

Type
Tip
Category
Development
Topic
CSS Tricks
Open source
No
Platforms
Web
For
Front-end developers and UI designers looking for creative theme toggle animations
Tags
css, view transitions, animation, dark mode, web design

Why it was saved

  • @jh3yy, 31 October 2025: A ready recipe for expressive, non-instant theme switches — copy the one-liner and define a linear() flicker curve instead of writing custom animation keyframes.

Related

Updated