CSS 过渡与动画速查
transition、animation 与常用缓动
REFERENCE · 13 ROWS
| 属性/关键字 | 作用 | 示例 |
|---|---|---|
| transition | 过渡 | transition: all 200ms ease |
| transition-property | 指定属性 | opacity, transform |
| transition-duration | 时长 | 200ms |
| transition-timing-function | 缓动 | ease-out / cubic-bezier(.4,0,.2,1) |
| @keyframes | 关键帧 | 定义动画阶段 |
| animation | 动画简写 | animation: spin 1s linear infinite |
| animation-fill-mode | 结束状态 | forwards |
| animation-delay | 延迟 | 150ms |
| ease-out | 先快后慢 | 进入动画 |
| ease-in | 先慢后快 | 离开动画 |
| linear | 匀速 | 循环动画 |
| steps() | 分步 | 打字机效果 |
| prefers-reduced-motion | 降低动效 | 无障碍必做 |
HOW TO USE
怎么用CSS 过渡与动画速查
- 打开CSS 过渡与动画速查,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
CSS 过渡与动画速查是什么
transition、animation 与常用缓动。CSS 过渡与动画速查按表格整理 13 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「CSS动画」相关的任务时可以直接用。
- 处理与「transition」相关的任务时可以直接用。
- 处理与「keyframes」相关的任务时可以直接用。
- 处理与「缓动」相关的任务时可以直接用。
表格说明
本表共 13 行 3 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。