CSS @starting-style 初始样式

@starting-style（CSS Transition新特性）：定义元素首次渲染时的起始状态、smooth transition on first render、与popover/dialog配合进入动画、替代JS的入场动画方案 · 难度：入门 · +10XP

CSS @starting-style —— 元素首次出现的入场动画

CSS Transition只能做已有元素的状态过渡（如hover变色）。元素首次添加到DOM时（如弹窗打开），没有"之前的状态"来过渡。@starting-style为元素的首次渲染定义初始状态，实现纯CSS的入场动画。

基本用法

/* 定义入场前的初始状态 */
@starting-style {
  .popover {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* 定义最终状态和过渡 */
.popover {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

当.popover首次渲染到DOM时，会从opacity:0+scale(0.8)过渡到正常状态。

动手练习

1. 基础练习：做一个渐入+放大的通知提示入场动画。
2. 进阶应用：配合popover属性做无JavaScript的弹窗入场/离场动画。
3. 项目实战：给网站的通知、工具提示、下拉菜单等添加统一的入场动画。