✨ CSS transition-behavior生成器 零依赖·可离线
免费在线CSS transition-behavior生成器。一键生成allow-discrete过渡行为代码，让display等离散属性支持CSS过渡动画。无需注册。
CSS transition-behavior生成器能做什么？
CSS transition-behavior生成器是一款免费在线工具，帮助前端开发者快速生成transition-behavior: allow-discrete代码。allow-discrete让display等离散属性支持CSS过渡动画，配合@starting-style实现元素从隐藏到显示的平滑过渡。纯前端处理，代码不上传。
核心功能
- allow-discrete代码生成：一键生成transition-behavior: allow-discrete声明
- 预设场景模板：弹窗、下拉菜单、Tooltip、通知等常见场景
- @starting-style集成：自动生成配套的@starting-style规则
- 实时预览：在页面内直接预览过渡动画效果
- 一键导出：复制或下载生成的CSS代码，直接用于项目
使用教程
- 选择预设场景：从弹窗、下拉菜单等模板中选择
- 配置选择器：输入CSS选择器和显示状态
- 设置过渡属性：勾选opacity、transform、display等
- 调整参数：设置时长、缓动函数、transform方向
- 生成代码：点击生成按钮，复制代码到项目中
应用场景
场景1：弹窗进入动画
弹窗从display:none变为display:block时，配合allow-discrete和@starting-style实现淡入+上移的进入动画，无需JavaScript。
场景2：下拉菜单展开
下拉菜单展开时，display参与过渡，配合opacity和transform实现优雅的展开效果。
场景3：通知消息滑入
通知消息从隐藏到显示，使用allow-discrete让display平滑过渡，配合transform实现滑入效果。
扩展知识
CSS transition-behavior是CSS Transitions Level 2规范的一部分，于2023年在Chrome 117中实现。它解决了CSS过渡的一个根本限制：离散属性（如display）无法参与过渡。传统方案中，display:none到display:block的变化是瞬时的，无法与opacity等可动画属性同步。allow-discrete改变了这一行为：在过渡期间，display保持目标值，直到过渡结束才切换。配合@starting-style定义进入动画的起始状态，实现了纯CSS的"进入动画"方案，比JavaScript方案更简洁、性能更好。
❓ 常见问题
CSS transition-behavior是什么？
transition-behavior是CSS属性，用于控制离散属性（如display）是否参与过渡动画。设为allow-discrete时，display属性可以平滑过渡。
什么是离散属性？
离散属性是值之间没有中间状态的CSS属性，如display:none到display:block无法插值。transition-behavior: allow-discrete让这类属性支持过渡。
allow-discrete如何工作？
设为allow-discrete后，display在过渡期间保持目标值，直到过渡结束才切换。配合@starting-style可以定义进入动画的起始状态。
浏览器兼容性如何？
Chrome 117+、Edge 117+、Safari 17.4+支持。Firefox正在实现中。建议配合@supports检测使用。
必须配合@starting-style使用吗？
不是必须，但推荐配合使用。单独使用allow-discrete只能让display参与过渡列表，配合@starting-style才能定义进入动画的起始状态。
支持哪些离散属性？
目前主要支持display属性。visibility也是离散属性但已有特殊过渡处理。未来可能支持更多离散属性。