🎨 CSS @starting-style生成器 零依赖·可离线
免费在线CSS @starting-style生成器。一键生成CSS起始样式规则，实现display:none到display:block的平滑过渡动画。无需注册。
CSS @starting-style生成器能做什么？
CSS @starting-style生成器是一款免费在线工具，帮助前端开发者快速生成CSS @starting-style规则代码。@starting-style是CSS新特性，用于定义元素从display:none进入文档流时的初始样式，让弹窗、下拉菜单等组件实现平滑的进入动画。纯前端处理，代码不上传。
核心功能
- 预设动画模板：弹窗、下拉菜单、Tooltip、通知等常见场景一键生成
- 自定义配置：自由选择过渡属性、时长、缓动函数和方向
- allow-discrete支持：自动添加transition-behavior: allow-discrete，让display属性支持过渡
- 实时预览：在页面内直接预览动画效果
- 一键导出：复制或下载生成的CSS代码，直接用于项目
使用教程
- 选择动画类型：从预设模板中选择或选择自定义
- 配置选择器：输入CSS选择器和显示状态类名
- 设置过渡属性：勾选opacity、transform、scale等属性
- 调整参数：设置时长、缓动函数、transform方向
- 生成代码：点击生成按钮，复制代码到项目中
应用场景
场景1：弹窗/对话框动画
弹窗从display:none变为display:block时，通过@starting-style定义opacity:0和transform起始状态，实现淡入+上移的进入动画。
场景2：下拉菜单展开
下拉菜单展开时，从透明+下移的起始状态过渡到完全显示，比纯JavaScript动画更流畅、性能更好。
场景3：Tooltip提示
鼠标悬停时Tooltip从隐藏到显示，配合@starting-style实现优雅的淡入效果，无需额外JavaScript。
扩展知识
CSS @starting-style是CSS Transitions Level 2规范的一部分，于2023年在Chrome 117中首次实现。它解决了CSS过渡的一个长期痛点：元素从display:none进入文档流时无法应用过渡动画。传统方案需要用JavaScript手动添加类名或使用requestAnimationFrame，而@starting-style让这一切纯CSS实现。配合transition-behavior: allow-discrete，display属性本身也能参与过渡，实现真正的"进入动画"。
❓ 常见问题
CSS @starting-style是什么？
@starting-style是CSS规则，用于定义元素从display:none进入文档流时的初始样式，让原本无法过渡的属性实现平滑动画。
为什么需要@starting-style？
传统CSS无法对display:none到display:block的元素应用过渡动画，因为元素进入文档流时没有起始状态。@starting-style提供了这个起始状态。
浏览器兼容性如何？
Chrome 117+、Edge 117+、Safari 17.4+支持。Firefox正在实现中。建议配合@supports检测使用。
可以和transition-behavior一起用吗？
可以。transition-behavior: allow-discrete让display属性支持过渡，@starting-style定义过渡起始状态，两者配合实现完整的进入动画。
支持哪些动画场景？
支持弹窗打开、下拉菜单展开、Tooltip显示、对话框弹出、通知滑入等从隐藏到显示的过渡动画场景。
和CSS动画有什么区别？
@starting-style配合transition使用，是声明式的状态过渡，更简洁。CSS @keyframes动画更灵活但代码更多。简单显示/隐藏推荐用@starting-style。