🎨 动画预设
⚙️ 参数设置
👁 实时预览
🎬
📋 生成代码
/* 选择预设动画查看生成的代码 */
CSS动画是CSS3引入的一项强大特性，允许开发者在不使用JavaScript的情况下创建复杂的动画效果。通过定义关键帧（@keyframes）和动画属性（animation），可以精确控制元素在动画过程中的每个状态，包括位置、大小、颜色、透明度等属性的变化。
关键帧是CSS动画的核心机制。它定义了动画在特定时间点（0%到100%）的样式状态。浏览器会自动在两个关键帧之间进行平滑插值，生成中间帧。例如，一个简单的淡入动画只需要定义opacity: 0在0%和opacity: 1在100%。
缓动函数决定了动画在不同时间点的速度变化。线性(linear)保持匀速，ease先快后慢，ease-in-out两端慢中间快。更精细的控制可以使用cubic-bezier(n,n,n,n)自定义贝塞尔曲线，实现弹跳、弹性等特殊效果。
本CSS动画生成器操作直观，只需几步即可生成专业的动画代码：
第一步：选择动画预设。在左侧"动画预设"区域，点击任意预设按钮即可选择动画效果。预设涵盖了淡入淡出(fadeIn/fadeOut)、滑动(slideIn)、弹跳(bounce)、旋转(rotate)、缩放(scale)、脉冲(pulse)、抖动(shake)、翻转(flip)等40余种常用动画。每个预设都经过精心调优，可直接用于生产环境。
第二步：调整动画参数。在"参数设置"区域，你可以自定义动画的时长（0.1-10秒）、延迟时间、缓动函数、迭代次数、方向和填充模式。实时预览区域会立即反映你的修改，让你直观看到最终效果。建议从默认参数开始，根据实际需求微调。
第三步：复制代码使用。参数满意后，在右侧"生成代码"区域切换到CSS或HTML标签页，点击"复制代码"按钮即可将完整代码复制到剪贴板。CSS标签页包含@keyframes定义和动画类，HTML标签页包含可直接运行的完整示例。
CSS动画在现代Web开发中无处不在，以下是几个典型的应用场景：
页面加载动画：在数据加载或页面切换时显示旋转、脉冲或弹跳动画，让用户感知系统正在工作，减少等待焦虑。配合骨架屏使用效果更佳。
按钮交互反馈：为按钮添加hover时的缩放、颜色渐变或微弹跳效果，可以显著提升用户的点击欲望和操作确认感。研究表明，有反馈的按钮点击率比静态按钮高出20%以上。
内容入场动画：在列表、卡片或模态框出现时添加slideIn或fadeIn动画，使界面更具层次感和生命力。配合ScrollTrigger等库可实现滚动触发的渐进式入场效果。
状态切换提示：使用shake动画提示表单验证错误，使用pulse动画高亮重要通知，使用rotate动画表示处理中状态。恰当的动效能让信息传达更加清晰有效。
CSS动画 vs JavaScript动画：CSS动画由浏览器合成器线程处理，不阻塞主线程，性能通常优于JavaScript动画。但JavaScript动画（requestAnimationFrame）在需要复杂逻辑控制、物理模拟或逐帧回调时更加灵活。最佳实践是：简单的视觉动画用CSS，复杂的交互动画用JS。
性能优化技巧：优先对transform和opacity属性做动画，这两个属性可以被GPU直接合成，不会触发重排(reflow)和重绘(repaint)。避免对width、height、margin、padding等布局属性做动画，这些会触发重排导致性能下降。
可访问性考虑：尊重用户的prefers-reduced-motion设置。在CSS中添加@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.01ms !important; } }，确保对动画敏感的用户也能舒适地使用你的网站。
CSS过渡(transition)用于元素从一种状态到另一种状态的平滑变化，只能定义开始和结束两个状态。CSS动画(animation)通过@keyframes可以定义多个关键帧，实现更复杂的多阶段动画效果，支持循环、反向播放等高级特性。
本工具生成的CSS动画代码使用标准@keyframes和animation属性，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。IE10及以上版本也支持CSS动画。
CSS动画通常性能很好，因为浏览器可以通过GPU加速渲染。建议使用transform和opacity属性进行动画，避免改变布局属性（如width、height、margin），这些会触发重排(reflow)导致性能下降。
复制生成的CSS代码粘贴到项目样式表中，然后给需要动画的元素添加对应的class即可。也可以将代码放入<style>标签中使用，或通过JavaScript的style.cssText动态注入。
支持。本工具内置了多种预设缓动函数（ease、linear、ease-in、ease-out、ease-in-out等），也支持输入自定义的cubic-bezier参数，如cubic-bezier(0.68, -0.55, 0.265, 1.55)。
动画效果受元素初始状态、父容器样式和其他CSS规则的影响。确保目标元素没有冲突的transform或opacity属性。使用浏览器的开发者工具检查计算样式，逐步排查问题。