CSS 动画生成器
从头编写 @keyframes 代码十分繁琐：您需要选择百分比、猜测属性值、点击刷新、观察效果并进行调整。此生成器提供六种现成的动画（淡入淡出、向上滑动、弹跳、旋转、脉冲和抖动），并允许您设置动画名称、时长、缓动、迭代次数和方向。结果会实时播放，满意后即可复制生成的 @keyframes 块及简写属性 animation。
如何创建 CSS 动画
-
1
选择预设
从六种内置动画中选择一种：淡入淡出、向上滑动、弹跳、旋转、脉冲或抖动。
-
2
为动画命名
为关键帧指定有效的 CSS 标识符，例如 `cardIn` 或 `fadeIn`。`animation` 简写中会使用相同的名称。
-
3
设置时间与重复
以秒为单位的时长、缓动（ease、ease-in、ease-out、ease-in-out、linear 或 spring）、迭代次数（1、2、3 或 infinite）和方向（normal、reverse、alternate 或 alternate-reverse）。
-
4
复制 CSS
生成的 `@keyframes` 规则和 `animation:` 简写形式已准备就绪，可直接粘贴到您的样式表中。
动画结构
@keyframes slide-in {
0% { transform: translateX(-100%); opacity: 0; }
60% { transform: translateX(10%); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
.card {
animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
简写形式中的八个属性：animation-name duration timing-function delay iteration-count direction fill-mode play-state。
缓动选项
此生成器提供六种缓动函数：
| 缓动 | cubic-bezier() | 手感 |
|---|---|---|
| linear | 不适用 | 匀速 |
| ease-in | 0.42, 0, 1, 1 |
缓慢开始，快速结束 |
| ease-out | 0, 0, 0.58, 1 |
快速开始，缓慢结束 |
| ease-in-out | 0.42, 0, 0.58, 1 |
慢-快-慢 |
| ease（默认） | 0.25, 0.1, 0.25, 1 |
柔和的默认效果 |
| spring | 0.68, -0.55, 0.27, 1.55 |
越过终点后回落归位 |
为正确的属性添加动画
浏览器可以对任意属性进行动画处理，但只有少数属性能在 GPU 上流畅运行而不会触发重排或重绘：
低成本（仅合成）：transform、opacity、filter。
高成本（重排/重绘）：width、height、top、left、margin、padding、background-color。
对 width 和 top 进行每秒六十帧的动画在小尺寸元素上可以实现，但若同时处理大量元素，则会在移动设备上卡顿。对于复杂运动，始终优先使用 transform: translate(...) 而非 top / left；对于宽度/高度的动画，则应选用 transform: scale(...)。
will-change：应谨慎使用
提示浏览器预先分配合成层有助于提升渲染流畅度：
.card { will-change: transform; }
但它会占用内存。应在动画触发前立即应用，并在完成后移除。在多个元素上永久设置 will-change: transform 可能弊大于利。
减少动态效果
部分用户对动态效果敏感，会在操作系统中设置偏好：
@media (prefers-reduced-motion: reduce) {
.card {
animation: none;
}
}
请尊重这一设置。作为替代方案，提供即时的状态变化或非常轻微的淡入淡出效果。
常见问题
CSS 适合简单、声明式的一次性动画效果；Web Animations API（element.animate()）则支持基于 JavaScript 的定时控制、动态关键帧以及暂停与播放控制。两者均运行于合成器上，均不具备固有的速度优势。
这种情况几乎总是因为您设置的是触发布局变化的属性（如宽度、顶部位置或边距），而非 transform。切换为 translate() 或 scale() 后，画面卡顿问题通常会消失。
可以，animation: a 1s, b 1s 1s, c 1s 2s; 可通过交错延迟顺序播放三个动画。此生成器只输出单个动画，因此额外的条目请自行添加到简写形式中。如需更复杂的编排效果，可使用 Web Animations API 或 GSAP 等库。
该设置使元素在动画开始前（延迟期间）进入 from 状态，并在动画结束后保持 to 状态。若未启用 both，元素将在动画结束时恢复至动画前的样式。生成器会保持简写形式精简，如有需要请自行补充填充模式。
相关工具
ASCII 表参考
完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。
HTML 字符参考
可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。
键盘快捷键参考
搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。
电话号码验证器
根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。
随机颜色生成器
生成 1 到 50 个随机 HEX 颜色，查看色块，复制代码，并用于 CSS、测试或配色探索。
BBCode 转 HTML 转换器
将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片和链接。