工具盒子

CSS @starting-style 入场动画生成器

可视化生成 CSS @starting-style 规则，解决元素首次出现时的入场动画痛点。 完整支持三种触发场景：首次渲染（动态插入 DOM）、 display 切换（none ↔ block）、 popover 显示（弹层入场）。 配合 transition-behavior: allow-discrete 让 display 属性可离散过渡， 原理说明面板解析 @starting-style 的核心机制。 8 组预设覆盖淡入、缩放、滑入、display 切换、popover 弹出等场景。所有处理在浏览器本地完成。

元素最终样式
@starting-style 起始样式
transition 过渡配置
ss
ss
预览元素

点击按钮重新挂载元素，触发 @starting-style 首次渲染入场动画

原理说明

元素首次渲染时（如动态插入 DOM），浏览器从 @starting-style 声明的起始样式过渡到最终样式。传统 transition 无法捕获首次渲染，@starting-style 填补了这一空白。

  • @starting-style 声明元素"首次出现"时的起始样式，浏览器从起始样式过渡到最终样式
  • 传统 transition 仅在属性值变化时触发，无法捕获首次渲染与 display 切换
  • display-toggle 场景需要 transition-behavior: allow-discrete 才能让 display 参与过渡
  • 嵌套语法更简洁（需浏览器支持 CSS nesting），独立语法兼容性更好
生成的 CSS
.card {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  @starting-style {
    opacity: 0;
    transform: scale(0.8);
  }
}

常见问题

什么是 CSS @starting-style？它解决了什么问题？

@starting-style 是 CSS Transitions Level 2 引入的规则（Chrome 117+ 2024 年起支持）， 用于声明元素"首次出现"时的起始样式。它解决了一个长期痛点： 传统 transition 仅在属性值变化时触发过渡，无法捕获元素首次渲染（如动态插入 DOM）、 display: none → block 切换、popover 显示等场景——这些场景下元素直接跳到最终样式，没有过渡动画。 @starting-style 让开发者声明起始样式，浏览器从起始样式过渡到最终样式。 语法：.card { opacity: 1; transition: opacity 0.3s; @starting-style { opacity: 0; } }。

@starting-style 的三种触发场景有什么区别？


首次渲染（first-render）：元素首次插入 DOM 时触发，如动态添加列表项、路由切换挂载组件。 浏览器从 @starting-style 声明的起始样式过渡到最终样式。
display 切换（display-toggle）：display: none → block 时触发， 元素从隐藏变为可见相当于"首次出现"。需配合 transition-behavior: allow-discrete 让 display 属性参与过渡（隐藏方向在过渡结束时变 none，显示方向立即变 block）。
popover 显示（popover-show）：popover 或 dialog 元素显示时触发， @starting-style 声明显示前的起始状态，实现弹层入场动画。

transition-behavior: allow-discrete 是什么？为什么 display 切换需要它？

transition-behavior: allow-discrete 是让离散属性（如 display）参与过渡的开关。 默认情况下 display 是离散属性，变化时立即生效，不会产生过渡动画。 启用 allow-discrete 后，浏览器会特殊处理 display 的变化时机： 显示方向（none → block）display 立即变为 block，让其他属性可以正常过渡； 隐藏方向（block → none）display 在过渡结束时才变为 none， 让其他属性先完成过渡再隐藏。语法： transition: opacity 0.3s, display 0.3s allow-discrete;。

嵌套语法和独立语法有什么区别？应该选哪个？

嵌套语法（推荐）：把 @starting-style 嵌套在选择器规则内， 语法更简洁。需要浏览器支持 CSS nesting（2023 年起全主流浏览器支持）。 示例：.card { opacity: 1; @starting-style { opacity: 0; } }。
独立语法：把 @starting-style 作为顶级规则， 内部嵌套选择器。兼容性更好（不依赖 nesting）。 示例：@starting-style { .card { opacity: 0; } }。
两者效果完全相同，推荐使用嵌套语法（更简洁），需要兼容旧浏览器时切换为独立语法。

@starting-style 和 animation 有什么区别？什么时候该用哪个？

@starting-style + transition：适合一次性入场动画—— 元素首次出现时从起始样式过渡到最终样式，过渡完成后保持最终状态。代码简洁，无需 @keyframes。
animation：适合循环动画或复杂关键帧动画—— 需要多个关键帧、循环播放、暂停控制等。用 @keyframes 定义关键帧，animation 属性控制播放。
选型原则：如果是"元素出现时播放一次过渡"，用 @starting-style； 如果是"持续循环的动画"或"多关键帧复杂动画"，用 animation。两者可组合使用—— @starting-style 处理入场，animation 处理入场后的循环动画。

display: none → block 切换时，隐藏方向（block → none）怎么实现过渡？

隐藏方向的过渡需要额外配置。基本思路：给元素添加 .hidden 类， 在 .hidden 状态下声明隐藏样式（如 opacity: 0）和 display: none。 配合 transition-behavior: allow-discrete，浏览器会先过渡 opacity 到 0， 过渡结束后才将 display 变为 none。示例： .panel { opacity: 1; transition: opacity 0.3s, display 0.3s allow-discrete; @starting-style { opacity: 0; } }， .panel.hidden { opacity: 0; display: none; }。 注意：@starting-style 声明的是显示方向的起始样式， 隐藏方向用普通 transition 即可（元素已可见，属性变化触发过渡）。

@starting-style 的浏览器兼容性如何？如何渐进增强？

Chrome 117+（2023 年 9 月）、Edge 117+、 Safari 17.5+（2024 年 5 月）、Firefox 129+（2024 年 8 月）支持。 不支持的浏览器会忽略 @starting-style 规则，元素直接使用最终样式（无入场动画）， 功能完整但无过渡效果——这是天然的渐进增强，无需额外降级代码。 如果需要保证动画效果，可用 @supports 检测： @supports (@starting-style) { /* 支持时的增强样式 */ }。 实际项目中直接使用即可，新旧浏览器体验都不会出错。

这个工具会保存或上传我的数据吗？

不会。本工具是纯前端应用，所有配置编辑、预览渲染、代码生成都在浏览器本地完成， 不发起任何网络请求，不保存任何用户数据。配置仅存在于当前浏览器会话中，关闭页面即清除。 可放心编辑任意 CSS 配置，无隐私泄露风险。