CSS 动画生成器
调整动画预设或关键帧并播放动画进行检查。获取用于网页的 CSS 和 HTML 使用示例。
功能介绍
从预设调整动画
从包含进入、退出和旋转在内的 12 种类型中选择。根据用途调整持续时间和重复方式。
编辑中间状态
为每个关键帧指定移动、旋转、缩放和不透明度，并查看生成的动画效果。
获取 CSS 和 HTML
复制或保存动画 CSS，以及使用相同类名的 HTML 示例。
使用方法
选择预设
选择所需动画，并将单次播放的持续时间设好。选择其他预设也会替换你已调整的设置。
仅调整所需部分
打开播放详情或关键帧设置，以更改中间动画、方向、重复方式和其他设置。
生成并播放
点击“生成 CSS 并预览”进行检查。更改任何设置后，请重新生成。
获取 CSS 和 HTML
应用 CSS，并将 toollet-motion 类添加到 HTML 元素。将 HTML 使用示例与 CSS 一起使用。
适用场景
创建进入动画
使用淡入或自下方进入预设，调整元素进入时的动画和速度。
按钮交互时的动画
将启动条件更改为悬停或键盘焦点，创建响应交互的动画。
了解关键帧和播放条件
中间状态和持续时间
关键帧的 % 表示其在单次播放中的位置。对于 1 秒的动画，50% 对应 0.5 秒。缓动决定关键帧之间数值的变化方式。
移动、旋转和外观
水平/垂直位置表示相对于原始位置的移动量。缩放值为 1 表示原始大小；不透明度为 0 表示透明，为 1 表示不透明。
延迟、重复和方向
延迟只会在播放开始前添加一次。有限次播放的总时长 = 延迟 + 单次播放时长 × 重复次数。“交替”会在正向和反向之间切换。
播放前后的状态
选择延迟期间和播放结束后显示的状态。反向和交替设置会更改播放开始和结束时使用的关键帧位置。
减少动态效果设置
生成的 CSS 支持设备的减少动态效果设置。动画会停止，并使用由设定方向和重复次数决定的终点状态。无限播放时，使用第一次播放的终点。
常见问题
可以只播放一次吗？
关闭“持续重复”，并将重复次数设为 1。普通预设默认播放 1 次；旋转和浮动预设默认启用持续重复。
应该将 CSS 应用到哪个元素？
将 toollet-motion 类添加到 HTML 元素，并与生成的 CSS 一起使用。HTML 使用示例是一段按钮元素代码，不是完整的独立网页。
最多可以创建多少个关键帧？
可以设置 2–8 个关键帧，包括 0% 的起点和 100% 的终点。添加关键帧时，会将其放在间隔最宽区段的中点。起点和终点无法删除，只有它们的 % 位置固定。
更改设置后预览消失了。
更改设置后会清除结果，以免误用之前设置生成的动画或代码。请重新生成以检查当前设置。
为什么预览没有动？
设备启用减少动态效果设置后，动画会停止。对于悬停和焦点设置，也请检查启动条件。切换到其他标签页时，预览会暂停。
可以在同一页面使用多个动画吗？
生成的类名和关键帧名称是共享的。若要使用彼此独立的动画，请分别更改每个动画的这两个名称，并在相应 HTML 中同步更改。
输入和结果
- 设置
- 12 种预设、2–8 个关键帧，持续时间为 0.2–60 秒。
- 播放
- 延迟 0–60 秒、重复 1–100 次或无限重复、缓动、方向、播放前后状态和启动条件。
- 输出
- CSS 和 HTML 使用示例。仅定义动画效果，不会创建完整网页或视频文件。