怎么在CSS中仅当元素在视口内时触发动画-css教程-PHP中文网

纯css无法实现视口触发动画，必须用intersectionobserver检测元素进入视口后动态添加类名，再由css定义带animation-fill-mode: both的完整关键帧动画。

怎么在css中仅当元素在视口内时触发动画

纯 CSS 无法做到。 这不是写法问题，而是能力边界——CSS 没有“视口可见性”这个运行时状态，@keyframes 和 animation 都不会感知滚动或元素是否出现在屏幕上。

为什么直接写 animation 不行

常见错误是给元素直接加 animation: slideIn 0.5s，结果动画在页面加载时就播完了，后续滚动进来毫无反应。原因很直接：浏览器解析完样式就立即启动动画，和元素是否可见、是否在视口里完全无关。

visibility: hidden 或 opacity: 0 不会暂停动画，只影响渲染结果
animation-delay 是固定延时，不能响应滚动时机
用 display: none 更糟：元素脱离文档流，IntersectionObserver 都观察不到

必须用 IntersectionObserver + 类名切换

这是当前唯一轻量、稳定、兼容主流浏览器（Chrome 60+/Firefox 55+）的方案。核心就是：JS 检测进入视口 → 动态加一个类 → CSS 用这个类定义动画。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

观察器要设 threshold: 0.1，表示元素 10% 高度进入视口即触发，避免快速滚动错过
回调中调用 observer.unobserve(target)，防止重复添加类导致动画卡顿或重播异常
CSS 里必须写 animation-fill-mode: both，否则动画一结束就回退到初始透明度/位移，看起来像“闪一下”
不要在 JS 里直接操作 element.style.animation，会覆盖 CSS 中定义的 fill-mode 行为

动画起始状态必须显式声明

很多“不动”或“闪一下”的问题，根源在初始样式没写全。比如想滑入，光写 to { transform: translateY(0); } 不够，from 必须明确：

/* 正确：起始状态清晰 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.is-inview {
  animation: slideIn 0.6s ease-out forwards;
  animation-fill-mode: both;
}