双50%宽度div滑动动画方向异常：右侧未按预期从右向左滑动

我设置了两个各占屏幕50%宽度的元素（左侧为div，右侧为span），预期左侧元素从左向右滑动，右侧元素从右向左滑动，但实际两者均从左向右滑动。

原代码 #

HTML代码

<article class="aboutMe">
  <div class="animation-about1"></div>
  <span class="animation-about2"></span>
</article>

CSS代码

.animation-about1 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  width: 50%;
  height: 800px;
  left: -50%;
  -webkit-animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.animation-about2 {
   position: fixed;
  background-color: #990606;
  display: inline-block;
  height: 800px;
  width:  50%;
 
  -webkit-animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

问题原因 #

1. 动画关键帧逻辑错误：slide-left和slide-right的关键帧完全一致，都是从translateX(0)移动到translateX(100%)，本质都是向右滑动，导致两个元素动画方向相同。
2. 右侧元素初始位置未设置：右侧元素没有初始定位，默认在屏幕左侧区域，无法实现从右向左滑入的效果。

修正方案 #

调整关键帧逻辑，让动画名称与行为匹配，同时设置右侧元素的初始位置，为两个元素绑定对应动画：

.animation-about1 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  width: 50%;
  height: 800px;
  left: -50%;
  /* 绑定向右滑入动画，从屏幕左侧滑到正常位置 */
  -webkit-animation: slide-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.animation-about2 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  height: 800px;
  width: 50%;
  /* 设置初始位置在屏幕右侧外部 */
  right: -50%;
  /* 绑定向左滑入动画，从屏幕右侧滑到正常位置 */
  -webkit-animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* 向右滑入：从左侧外位置移动到正常位置 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

/* 向左滑入：从右侧外位置移动到正常位置 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

修改说明 #

• 给右侧元素添加right: -50%，让它初始处于屏幕右侧外部。
• 修改slide-left关键帧的最终状态为translateX(-100%)，实现向左滑动的效果。
• 为左侧元素绑定slide-right动画，右侧绑定slide-left动画，分别对应预期的滑动方向。

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