如何基于data属性用单个CSS Animation控制动画正反方向？

你可以通过CSS变量结合单个@keyframes动画实现需求，避免定义重复动画，同时解决切换方向时的状态跳转问题：

步骤1：定义基础CSS变量与单个核心动画 #

.animated-element {
  // 定义可动态切换的动画状态变量
  --start-x: -100%;
  --end-x: 0%;
  --start-opacity: 0;
  --end-opacity: 1;
  // 复用单个动画
  animation: slide 0.5s ease both;
}

// 单个@keyframes动画，用变量控制起始/结束状态
@keyframes slide {
  from {
    transform: translateX(var(--start-x));
    opacity: var(--start-opacity);
  }
  to {
    transform: translateX(var(--end-x));
    opacity: var(--end-opacity);
  }
}

步骤2：通过data-state切换变量值 #

当data-state="reverse"时，交换起始和结束状态的变量值，实现反向动画效果：

.animated-element[data-state="reverse"] {
  --start-x: 0%;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 0;
  // 重新触发动画，确保变量变化后平滑过渡
  animation: slide 0.5s ease both;
}

步骤3：保持原有Framer Motion逻辑 #

继续使用Framer Motion根据滚动位置设置data-state属性即可，无需修改触发逻辑。

原理说明 #

• 用CSS变量动态交换动画的起始/结束状态，替代animation-direction的生硬切换
• 单个@keyframes动画复用所有状态变化，彻底避免代码冗余
• 变量切换时，动画会基于当前元素状态平滑过渡到新目标状态，不会出现首尾跳转的突兀效果

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