CSS 入场动画生成器

CSS 入场动画生成器: 用途

选择效果、时长、曲线（推荐强 ease-out）、距离，以及各项之间的级联延迟。预览会显示六个方块依次进入，并可重复播放。

代码使用 opacity 和 transform 的过渡，用 IntersectionObserver 在元素出现在屏幕上时触发动画，并为偏好减少动态效果的用户提供无位移版本。没有 JavaScript 时，内容正常显示。

使用方法

1. 选择效果、时长和曲线。
2. 调整距离和级联，并查看预览。
3. 复制 CSS 和脚本，使用 anima 类。

使用场景

• 落地页中滚动时出现的区块。
• 依次出现的服务和产品卡片。
• 为企业网站润色。

常见问题

该用多长时间？

界面元素用 150 到 300 毫秒。在展示型页面的区块中，到 600 ms 左右仍然自然。动画太长会让网站显得迟钝。

该选什么曲线？

对于进入屏幕的元素，使用末尾减速的曲线（强 ease-out，如 cubic-bezier(0.23, 1, 0.32, 1)）：动作开始快，然后平稳落定。入场时避免使用 ease-in，因为它恰恰拖慢了开头。

不喜欢动效的用户怎么办？

代码遵循系统的“减少动态效果”设置（prefers-reduced-motion）：元素只会短暂淡入，没有位移。

滚动模式是怎么工作的？

元素进入屏幕时，IntersectionObserver 会为它添加 visivel 类。没有 JavaScript 时，元素正常显示，没有动画。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具