无需登录 数据私有 本地保存

滚动文字效果生成器 - 入场滑入动画

13
0
0
0
✓ 已复制到剪贴板
文字内容
0/120
滑入方向
点击选择文字滑入的起始方向
动画参数
0.2s3s
0s2s
文字样式
轻粗
触发方式
滚动触发将生成 Intersection Observer 代码
快速预设
优雅从下淡入 快速左滑入 弹跳从下 顶部下落
实时预览
欢迎来到我的网站 🚀
生成代码
常见问题 & 知识点

CSS入场滑入动画（Slide-in Entrance Animation）是指元素在进入用户视野时，从某个方向（上、下、左、右）滑入并停留在最终位置的动画效果。它通常配合 transform: translateX/Y 和 opacity 实现。

常见应用场景：网站首屏标题入场、滚动到某板块时文字渐显、产品特性列表依次滑入、落地页动态展示、以及各类营销页面的视觉动效。优秀的入场动画能显著提升用户体验和页面品质感。

这是目前最流行的入场动画之一。核心CSS代码如下：
@keyframes slideUpFadeIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.element { animation: slideUpFadeIn 0.8s ease-out forwards; }

关键点：同时改变 transform（垂直位移）和 opacity（透明度），使用 ease-out 缓动让动画在结束时自然减速，forwards 填充模式保持动画结束状态。

推荐使用 Intersection Observer API，它性能优秀且浏览器支持良好。原理是监听目标元素是否进入视口（viewport），进入时为其添加动画类名。

核心思路：CSS中定义 .slide-in-hidden { opacity: 0; transform: translateY(40px); } 和 .slide-in-visible { animation: slideUpFadeIn 0.8s ease-out forwards; }，JS中用 Intersection Observer 在元素进入视口时将 hidden 类替换为 visible 类。本工具生成的代码已包含完整实现。

Transition（过渡）：需要触发条件（如hover、类名变化），从状态A平滑过渡到状态B，适合简单的双向变化。
Animation（动画）：通过 @keyframes 定义多阶段，可自动播放、循环、延迟，支持更复杂的多关键帧动画。

入场滑入动画通常使用 Animation，因为需要页面加载或滚动时自动触发，且常配合 animation-fill-mode: forwards 保持最终状态，这些是Transition难以实现的。

1. 使用 transform 而非 top/left：transform 由 GPU 合成器处理，不触发重排（reflow），性能更好。
2. 使用 opacity 而非 visibility：opacity 同样由 GPU 加速。
3. 添加 will-change 提示：对动画元素添加 will-change: transform, opacity; 让浏览器提前优化。
4. 避免同时动画过多元素：使用 stagger（交错延迟）分散动画时间，减少帧率压力。
5. 移动端使用更短的动画时间：0.3s–0.6s 在移动端表现更流畅。

none（默认）：动画前后都不保留关键帧样式，元素回到原始状态。
forwards：动画结束后保持最后一帧的样式（入场动画必备）。
backwards：在动画延迟期间应用第一帧的样式（让元素在动画开始前就处于起始状态）。
both：同时拥有 forwards 和 backwards 的效果。

入场滑入动画推荐使用 forwards 或 both，确保文字动画结束后停留在最终位置，不会闪回消失。

使用 animation-delay 为每个元素设置不同的延迟时间即可实现交错效果。例如：
.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.15s; }
.item:nth-child(3) { animation-delay: 0.3s; }

如果是滚动触发，可在 Intersection Observer 回调中为每个元素设置递增的延迟，或使用 CSS 自定义属性配合 JS 动态设置。本工具生成单个元素的动画代码，你可以为多个元素手动添加不同的 delay。

这取决于动画类型和使用场景：
• 快速滑入（0.3s–0.5s）：适合列表项、标签、图标等小型元素。
• 标准入场（0.6s–0.9s）：适合标题、段落文字、卡片等，最常见。
• 慢速优雅（1s–1.5s）：适合首屏大标题、品牌展示，营造高端感。
• 超过1.5s：需谨慎使用，过慢会让用户觉得页面反应迟钝。

一般推荐 0.6s–0.8s 配合 ease-out，兼顾流畅感与效率。

Intersection Observer API 在现代浏览器中支持率超过 97%（包括Chrome、Firefox、Safari、Edge 的最近版本）。

对于需要兼容 IE11 的项目，可使用 polyfill。大多数现代网站已无需担心兼容性问题。本工具生成的代码使用标准 Intersection Observer API，在主流浏览器中均可正常运行。

完全可以！生成的代码是纯净的 HTML + CSS（+ 可选的 JavaScript），不依赖任何第三方库。

使用步骤：
1. 将 CSS 代码复制到你项目的样式文件中。
2. 将 HTML 代码放入页面相应位置。
3. 如果使用滚动触发，将 JS 代码复制到你的脚本文件中（放在 DOM 加载完成后执行）。

代码中的类名使用了语义化命名，你可以根据项目需要自行修改。所有动画参数（方向、时长、缓动等）都在生成的代码中清晰标注。
🔧 相关工具