Using @starting-style in CSS to animate entry and exit transitions

🔴 Patreon: https://www.patreon.com/joyofcode
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ

🔖 Timestamps

0:00 Intro
0:24 Enter Transitions Using @Keyframes
1:22 Enter Transitions Using @starting-style
2:33 The Advantage of Using CSS Transitions
3:18 Animating Discrete Properties Like The Display Type
4:33 Using View Transitions For Animating Layouts
6:44 Dialog Example
8:39 Outro

#joyofcode #frontend #css

Joy of Code

A walkthrough of modern CSS entry and exit animations using @starting-style, CSS transitions, and the View transitions API. Key topics include: using @starting-style to define initial states without JavaScript class toggling, the advantage of CSS transitions over keyframes (cancelable mid-animation), animating the display property with 'allow-discrete', and using the View transitions API for smooth layout shifts when DOM elements are added or removed. The dialog element and popover API are shown as ideal use cases for @starting-style.

Animate Entry And Exit Transitions With Modern CSS