CSS 动画生成器

功能介绍

CSS 动画允许你通过纯 CSS 在网页元素上创建平滑的过渡和复杂的动画效果——不需要 JavaScript（对于基础动画而言）。CSS CSS 动画系统基于两个核心概念：过渡（简单的状态到状态变化）和关键帧（多步动画序列）。 CSS animation 属性简写包括： - animation-name：@keyframes 规则的名称 - animation-duration：一个循环需要多长时间（如 1s、500ms） - animation-delay：动画开始前的等待时间 - animation-timing-function：速度曲线（ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier） - animation-iteration-count：重复次数（数字或 infinite） - animation-direction：normal、reverse、alternate、alternate-reverse - animation-fill-mode：之前/之后应用的样式（none、forwards、backwards、both） - animation-play-state：running 或 paused @keyframes 规则定义动画阶段： @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 预置动画类别包括： - 淡入动画：fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight、fadeOut - 滑动动画：slideInUp、slideInDown、slideInLeft、slideInRight - 弹跳动画：bounceIn、bounceInUp、bounceInDown、bounceOut - 旋转动画：rotateIn、rotateInUpLeft、rotateInUpRight、rotateOut - 缩放动画：zoomIn、zoomInUp、zoomInDown、zoomOut - 特殊动画：hinge、rollIn、rollOut、flash、pulse、shake、swing、tada 时间函数说明： - ease：慢开始、快中间、慢结束（默认） - linear：恒定速度 - ease-in：慢开始，加速 - ease-out：快开始，减速 - ease-in-out：慢开始和结束，快中间 - cubic-bezier(x1,y1,x2,y2)：自定义时间曲线 生成器输出干净的跨浏览器 CSS，带有所有必要的浏览器前缀（-webkit-、-moz-、-o-）和旧版浏览器的回退方案。

使用方法

1. 从效果库中选择一个动画效果。浏览 Fade、Slide、Bounce、Rotate、Zoom 和 Special 效果等类别。点击任何动画缩略图在演示元素上预览。
2. 使用滑块或输入字段调整动画持续时间。典型值范围从 200ms（快速反馈）到 2-3 秒（戏剧性效果）。对于 UI 交互，较短持续时间感觉更敏捷。
3. 如果你想让动画延迟一段时间再开始，设置延迟。对多动画排序很有用（如 500ms 后淡入标题，然后 800ms 后滑入内容）。
4. 从下拉菜单选择时间函数。入场动画尝试 'ease-out'（快速到达，柔和停止），退出动画使用 'ease-in'。连续旋转使用 'linear'。使用曲线编辑器创建自定义 cubic-bezier 曲线。
5. 配置迭代次数（动画播放多少次）和方向（normal、alternate 来回效果）。为加载旋转等连续动画设置 'infinite'。
6. 点击 'Play' 按钮实时预览动画。演示元素运行你配置的动画。点击 'Pause' 在当前状态冻结或 'Replay' 重新播放。
7. 从输出面板复制生成的 CSS 代码。代码包括 @keyframes 定义、animation 简写和单独的展开属性。粘贴到样式表或使用内联样式。

计算示例

相关搜索

相关搜索：css 动画生成器, css 关键帧, css 动画, 动画生成器。

css 动画生成器css 关键帧css 动画动画生成器

常见问题

相关工具

热门工具