CSS动画生成器

CSS 动画关键帧生成器使用指南

📌 简介

CSS 动画生成器是一款帮助前端开发者和网页设计师快速实现动态效果的在线工具。在网页中添加微小的动画（如按钮点击时的脉冲、图标警告时的抖动），能大幅提升用户交互体验。但这些动画如果用 JavaScript 来写会非常耗性能，而纯手写 CSS 的 `@keyframes` 规则又十分枯燥。本工具预置了 Pulse（脉冲）、Bounce（弹跳）、Shake（抖动）等最常用的动画特效，通过滑块即可所见即所得地生成原生 CSS 代码。

📖 @keyframes 与动画原理

CSS3 引入了 `@keyframes` 规则，它允许开发者定义动画在不同时间点的状态。例如，在 Pulse 动画中，0% 和 100% 时元素的 `transform: scale(1)` 保持原大小，在 50% 时放大到 `scale(1.2)`，浏览器会自动在这三个关键帧之间进行平滑插值计算，从而产生呼吸般的缩放效果。本工具会根据您选择的动画类型，动态计算并生成对应的关键帧代码，并自动配置 `animation` 属性的持续时间（Duration）和循环次数（Iteration）。

💼 常见应用场景

• 提示与警告： 当表单输入错误时，让输入框产生 Shake（抖动）效果提醒用户。
• 吸引注意力： 让页面上的“限时优惠”按钮或小红点产生 Pulse（脉冲）缩放。
• 加载占位： 为 Skeleton（骨架屏）添加呼吸效果的动画。
• 趣味交互： 为网页上的 Logo 或图标添加轻微的 Bounce 弹跳动效。

⚙️ 使用步骤

1. 在左侧选择喜欢的动画类型（脉冲、弹跳、抖动等）。
2. 调节动画的持续时间（Speed）和运动幅度（Amplitude）。
3. 观察右侧方块 Demo 的实时动画效果。
4. 确认后，复制右下角的 CSS 代码到您的样式表中即可。

⚠️ 注意事项

• 动画虽好，但请克制使用。过多或过快的动画可能会引起用户视觉疲劳，甚至引发部分人群的眩晕。
• 为了极致的性能，建议尽量使用 `transform` 和 `opacity` 来制作动画，本工具生成的代码均符合此优化标准。

❓ 常见问题 (FAQ)