CSS实现元素可见时触发动画（无需页面刷新）

核心思路 #

利用CSS原生的滚动驱动动画特性，让动画在元素进入屏幕视口时自动触发，全程无需JavaScript。

步骤1：定义动画效果 #

先用@keyframes编写你需要的动画，比如常见的淡入上移效果：

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

步骤2：绑定视口触发规则 #

给需要触发动画的元素添加样式，通过animation-timeline绑定视口滚动事件，并用animation-range控制动画触发的时机：

.animate-on-scroll {
  /* 初始状态：保持动画未触发的样式 */
  opacity: 0;
  transform: translateY(20px);
  /* 绑定动画并设置结束后保持状态 */
  animation: fadeUp 0.6s ease-out forwards;
  /* 关联视口滚动作为动画触发源 */
  animation-timeline: view();
  /* 设定触发范围：元素顶部进入视口10%时启动动画，完全进入时结束 */
  animation-range: entry 10% cover 50%;
}

步骤3：旧浏览器降级方案（可选） #

如果需要兼容不支持滚动驱动动画的旧版本浏览器，可以用过渡效果做简单降级（仅页面首次加载后触发一次）：

/* 降级样式：仅作备选 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 页面获得焦点时触发过渡（效果有限） */
body:focus-within .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

注意事项 #

• 现代浏览器（Chrome 115+、Firefox 117+、Safari 16.4+）已支持animation-timeline和view()函数，学习阶段优先使用该方案即可。
• animation-fill-mode: forwards会让元素保持动画结束后的状态，不会随滚动重置。
• 可调整animation-range参数自定义触发时机，比如entry 0% cover 100%表示元素刚进入视口就启动动画。

内容的提问来源于stack exchange，提问作者dododdo