如何实现HTML文本滚动触发动画？纯CSS可行吗？

我正在开发一个追求简洁流畅、美观且兼具响应式与功能性的项目，希望实现文本元素滚动到视图时从侧边滑入的动画效果。尝试过相关方法但未成功，以下是我的代码：

我的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
html body {
  background: #0e1212;
  font-family: 'Roboto Mono', monospace;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  font-family: 'Roboto Mono', monospace;
}

.main {
  display: grid;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
    position: absolute;
  top: 25%;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #622cd8;;
  transition: 0.5s;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

.active:hover {
  color: #808080;
  animation-name: active;
}

@keyframes active {
  0% {
    color: #808080;
  }
  100% {
    color: #808080;
  }
  }
 
  @keyframes example {
    0% {
      color: #DBDBDB;
    }
    100% {
      color: #622cd8;
      
    }

  } .hidden{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
}
.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <script src='script.js'> </script>
  <title>Home</title>
</head>
<body>

<ul id='menu' >
  <li><a class="active" href="#home" id="home">.home()</a></li>
  <li><a class="inactive" href="#news">.about()</a></li>
  <li><a class="inactive" href="#contact">.stuffs()</a></li>
  <li><a class="inactive" href="#about">.apply()</a></li>
</ul>

<div class="main">
  <section>
    <h1 style="text-align: center; color:#DBDBDB; font-size: 100px" >cosmic<span style="color: #622cd8">.club()</span></h1>
    <p style="font-size: 25px; color: #ABACAC; position: relative; top: -5%">a modern, advanced, and minimalistic web service</p>
  </section>
  <section>
    <h1>More</h1>
    <p>this is also a centered section</p>
  </section>
</div>
  
</body>
  
</html>

请问我可以使用纯CSS实现该动画效果，还是必须使用JavaScript？

解答 #

纯CSS能实现，但兼容性有限 #

现代浏览器支持的CSS新特性可以让你不用写一行JS：

方法1：用:in-view伪类（Chrome 117+）

修改你的CSS，给.hidden类加上过渡，再用:in-view触发状态切换：

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 0.6s ease-out;
}

.hidden:in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

然后给需要动画的元素（比如section里的h1、p）加上hidden类即可。

方法2：用滚动时间线（更广泛的现代浏览器支持）

如果需要兼容更多现代浏览器，用animation-timeline属性：

html {
  scroll-timeline: --page-scroll block;
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  animation: slide-in 0.6s ease-out forwards;
  animation-timeline: --page-scroll;
  animation-range: entry-crossing 0% entry-crossing 100%;
}

@keyframes slide-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

同样给目标元素加hidden类即可。

JavaScript方案兼容性更强（推荐） #

如果要兼容旧浏览器，或者需要更灵活的控制，用Intersection Observer API是目前的主流方案——你之前没成功，大概率是DOM没加载完就执行了JS，或者没给元素加hidden类：

1. 保留你的.hidden和.show类：

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 0.6s ease-out;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

2. 写正确的JS代码（放在script.js里，或HTML底部的script标签中）：

document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      entry.target.classList.toggle('show', entry.isIntersecting);
      // 可选：如果希望滚动离开时重新隐藏，去掉下面的注释
      // if (!entry.isIntersecting) entry.target.classList.remove('show');
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.hidden').forEach(el => observer.observe(el));
});

3. 给需要动画的元素加上hidden类。

总结 #

• 纯CSS可行，但只适合现代浏览器场景；
• JS方案兼容性拉满，也是你之前尝试的方法的正确打开方式；
• 检查一下你之前的代码：有没有给目标元素加hidden类？JS是不是在DOM加载后执行的？

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