transition:animate
The transition:animate directive sets which built-in or custom animation plays during a view transition.
Syntax
<main transition:animate="slide" />Examples
---
import { slide, fade } from 'astro:transitions';
---
<main transition:animate="slide" />
<header transition:animate={fade({ duration: '0.3s' })} />
<footer transition:animate="none" />
Output
The main content slides between pages, the header crossfades over 0.3s, and the footer does not animate.
Notes
Built-in keywords: fade (default), slide, none, initial. Import slide() or fade() from astro:transitions to customize duration/easing or build a custom animation object. Honors prefers-reduced-motion.