CSS中如何为类实现动画效果？新手rd类动画失效及滚动淡出需求求助

嘿，我来帮你搞定这个问题！先从你当前动画不工作的原因说起，再针对你「滚动到下一页时第一页元素淡出」的需求给出完整方案。

一、当前动画没触发的核心问题 #

你的.rd动画完全没动，主要是两个低级但关键的错误：

1. CSS大小写敏感坑：你定义的关键帧是小写的@keyframes rd，但.rd类里写的是animation: RD 5s infinite——CSS对标识符大小写敏感，大写的RD找不到对应的关键帧，所以动画直接失效了。
2. 缺少定位属性：left属性只对非static定位的元素生效（比如relative/absolute），你的.rd默认是position: static，所以哪怕动画生效，left的位移也看不到。

另外还有个小细节：flex布局里没有justify-items属性，应该用justify-content来控制主轴方向的元素对齐，我也顺便帮你修正了。

先把这些问题改了，动画就能正常跑起来，修正后的CSS片段：

.rd { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; /* 替换原错误的justify-items */
  align-items: center; 
  overflow: visible; 
  height: 100%; 
  opacity: 1; /* 建议用0-1的数值，比百分比更符合CSS标准 */
  position: relative; /* 添加定位，让left属性生效 */
  animation: rd 5s infinite; /* 把RD改成小写的rd */
} 
@keyframes rd { 
  0% { left: 0; opacity:1; } 
  50% { left: 200px; opacity:0; } 
  100% { left: 0; opacity:1; } 
} 

二、实现「滚动到下一页时第一页元素淡出」的需求 #

你原来的无限循环动画显然不是你要的效果，我们需要结合fullpage.js的滚动事件来触发单次淡出动画，步骤如下：

1. 调整CSS：准备触发式的淡出效果 #

先去掉infinite，定义一个需要触发才会执行的淡出状态（用CSS类来控制）：

.rd { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: center; 
  overflow: visible; 
  height: 100%; 
  opacity: 1;
  position: relative;
  transition: all 0.5s ease; /* 用过渡效果更简洁，也可以用关键帧动画 */
}

/* 定义淡出的类，滚动时添加这个类即可 */
.rd.fade-out {
  opacity: 0;
  left: 200px;
}

/* 如果偏好关键帧动画，也可以这么写： */
/*
@keyframes fadeOut {
  from { opacity: 1; left: 0; }
  to { opacity: 0; left: 200px; }
}
.rd.fade-out {
  animation: fadeOut 0.5s forwards; /* forwards让动画停在最后一帧 */
}
*/

2. 用fullpage.js的滚动事件触发动画 #

fullpage.js自带onLeave回调，当用户离开第一页时，给.rd元素加上淡出类；回到第一页时再移除，恢复显示：

new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction) {
    // 离开第一页（index从0开始计数）时触发淡出
    if (origin.index === 0) {
      document.querySelector('.rd').classList.add('fade-out');
    }
    // 回到第一页时，移除淡出类，恢复元素显示
    if (destination.index === 0) {
      document.querySelector('.rd').classList.remove('fade-out');
    }
  }
});

3. 修正HTML的小错误 #

你的HTML里多了个无效的</d>标签，得删掉，另外建议加上第二页的内容方便测试滚动效果：

<div id="fullpage"> 
  <section class="vertical-scrolling"> 
    <div class="rd"> 
      <img class="crown" src="https://m.media-amazon.com/images/I/6176t0uwOEL._SL1200_.jpg" alt="crown" /> 
      <img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1920px-Heart_coraz%C3%B3n.svg.png" alt="heart"> 
    </div> 
  </section> 
  <!-- 新增第二页，用于测试滚动触发效果 -->
  <section class="vertical-scrolling">
    <h2>这是第二页</h2>
  </section>
</div>

最后再提个小建议 #

如果是第一次用fullpage.js，记得在HTML里引入它的CSS和JS资源，不然滚动功能也会失效哦～

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