CSS 动画生成器
从六种常见动画模式（fade、slide、bounce、spin、pulse、shake）中选一个，用实时滑块调整 duration、delay、timing function、iteration、direction、fill-mode。预览面板在真实 DOM 元素上运行动画，便于复制前确认实际效果。生成 @keyframes 块与对应的 `.box { animation: … }` shorthand 一并复制到项目。
预览
生成的 CSS
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 1s ease 0s 1 normal none;
}生成的 CSS 使用标准属性 — 无供应商前缀。所有现代浏览器均支持 unprefixed。
使用方法
- 选预设（fade、slide、bounce 等）。
- 调整 duration、delay、easing、iteration、direction、fill-mode。
- 查看预览并复制生成的 CSS。
常见问题
- 为什么元素结束后回到初始？
- `animation-fill-mode` 默认 `none` — 样式仅在动画期间应用。设 `forwards` 可保持最终 keyframe 状态。
- 迭代 `1` 与 `infinite` 区别？
- iteration 表示运行 keyframes 多少次后停止。`infinite` 永久循环 — 适合 spinner，但离屏元素也会持续耗 CPU。
- 可与 `prefers-reduced-motion` 配合？
- 可以。将 `.box` 规则包入 `@media (prefers-reduced-motion: no-preference) { … }`，对动效敏感用户自动 opt-out。
- `spin` 看不出 easing？
- Spin 是匀速旋转 — 单一旋转变量上的 easing 几乎呈线性。easing 在有起止状态的属性（opacity、translate）上最明显。
相关工具
CSS Cubic-Bezier 曲线生成器
拖动控制点设计 CSS 缓动曲线——实时预览运动，复制 cubic-bezier()。
CSS Flexbox 演练场
可视化选择 flex-direction、justify-content、align-items 与 gap——复制 CSS 或 Tailwind 类。
CSS Grid 演练场
可视化选择 grid-template-columns / rows、gap 与项目对齐——CSS 直接复制到项目。
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
CSS color-mix() 预览 (插值空间对比)
对比现代 CSS color-mix() 函数在不同插值空间 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) 下如何混合两种颜色 — 实时色卡、计算 hex、每个空间的完整渐变条以及可复制的 CSS。
Open Graph & Twitter Card 生成器
填表单，得到可粘贴的 `<meta>` 块 — Facebook / LinkedIn / Slack 的 Open Graph 与 X / Discord 的 Twitter Card 标签。