# Flickering Theme Switch with View Transitions and CSS linear()

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

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/jh3yy/status/1984372822421225721): 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

- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)
- [Dynamic Theming with CSS light-dark() and color-scheme](https://xiry.app/resources/dynamic-theming-with-css-light-dark-and-color-scheme): CSS pattern for switching colors across themes without duplicate selectors (Tip, Free)
- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/flickering-theme-switch-with-view-transitions-and-css-linear

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.