20.@starting-style规则 (@starting-style)

@starting-style CSS at-rule让您可以定义元素进入DOM时的起始样式，无需JavaScript即可实现无缝的入场动画。

📖 本章概述

@starting-style是CSS中一个革命性的新特性，它允许我们为新创建或动态添加的元素定义起始样式。这个规则解决了长期以来CSS动画的一个痛点：如何为刚刚进入DOM的元素创建平滑的入场动画。通过@starting-style，我们可以在不使用JavaScript的情况下，为元素的首次出现创建优雅的动画效果。

🎯 学习目标

• 理解@starting-style规则的基本概念和工作原理

• 掌握为DOM入场元素创建动画的技巧

• 学会处理不同类型的入场动画效果

• 了解与dialog、popover等现代元素的结合使用

• 掌握离散属性的动画处理方法

• 学会与其他CSS特性的组合应用

• 掌握性能优化和最佳实践

🚀 @starting-style基础

基本语法

/* 基本语法结构 */ .element { /* 最终状态样式 */ opacity: 1; transform: translateY(0); transition: opacity 0.5s, transform 0.5s; } @starting-style { .element { /* 起始状态样式 */ opacity: 0; transform: translateY(20px); } } /* 多个选择器 */ @starting-style { .fade-in { opacity: 0; } .slide-in { transform: translateX(-100px); } .scale-in { transform: scale(0.5); } }

核心概念

• DOM入场检测: 只在元素首次进入DOM时应用起始样式

• 自动触发: 无需JavaScript手动触发，CSS自动处理

• 过渡依赖: 必须配合transition属性才能产生动画效果

• 一次性应用: 起始样式只在元素首次出现时应用一次