如何用CSS实现内容进入视口时的淡入升起动画？-css教程-PHP中文网

使用 css 的 @keyframes 定义从透明且下移状态到不透明且原位状态的动画，配合 animation-fill-mode: forwards 保持结束状态。在 html 中为元素添加一个类名（如 .fade-in-up），并通过 javascript 监听 intersectionobserver 事件，当元素进入视口时动态添加该类名以触发动画。

如何用CSS实现内容进入视口时的淡入升起动画？

如何定义淡入升起的关键帧与样式

核心在于设置初始状态为 opacity: 0 和 transform: translateY(20px)，结束状态为 opacity: 1 和 transform: translateY(0)。需要确保 animation-fill-mode 设为 forwards，否则动画结束后元素会跳回初始的不可见状态。同时建议设置 will-change: transform, opacity 以提升渲染性能。

如何用CSS实现内容进入视口时的淡入升起动画？

/* CSS 代码 */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 或者使用 animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  animation: fadeInUp 0.8s ease-out forwards;
}

如何使用 IntersectionObserver 触发动画

通过 IntersectionObserver API 可以高效地检测元素是否进入视口。创建一个观察者实例，配置 threshold 为 0.1 或更高以确保可见性。在回调函数中，当 entry.isIntersecting 为真时，给元素添加触发动画的类名，并调用 unobserve 停止观察以避免重复触发。这种方法比监听 scroll 事件性能更好，因为它由浏览器底层优化。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何用CSS实现内容进入视口时的淡入升起动画？

// JavaScript 代码
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-on-scroll');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in-up').forEach(el => {
  observer.observe(el);
});

如果元素未正确显示动画原因是什么

常见原因是初始样式未正确设置或类名添加时机错误。如果 .fade-in-up 类没有设置 opacity: 0，元素一开始就是可见的，动画看起来像是突然显现而非淡入。另外，如果 transition 或 animation 的属性名与 transform 或 opacity 不匹配，或者 fill-mode 未设为 forwards，也会导致状态异常。检查控制台是否有 CSS 覆盖冲突，并确保 JS 在 DOM 加载后执行观察器绑定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！