CSS动画异常：特定元素(fruit-1)动画表现不符合预期

问题原因 #

fruit-1动画异常的核心原因是混合使用了不同基准的定位方式：

• 用left: 80%（基于父元素宽度的relative定位）设置初始位置
• 动画中的transform: translate()（基于元素自身宽度的位移）叠加在该定位上
  两者的百分比基准不一致，导致动画过程中视觉位置变化不连续，最终只有动画结束时才会跳到目标位置。

解决方案 #

统一使用transform控制元素的初始位置和动画位移，让所有位移计算的基准一致（均基于元素自身宽度/高度），避免relative定位偏移与transform叠加的冲突。

修改后的代码 #

1. 调整水果定位CSS

移除所有水果类中的left/right/top属性，改用transform设置初始位置：

.green-circle img {
  height: 25%;
  width: 50%;
  opacity: 0;
  animation: fruitFlyIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards;
  animation-delay: 5s;
  position: relative; /* 统一设置relative，避免重复 */
}

.fruit-1 {
  transform: translateX(80%); /* 替代原left:80%，基准为自身宽度 */
  --translateX: -80%;
  --translateY: 0;
}

.fruit-2 {
  transform: translate(-50%, 50%); /* 替代原right:50% + top:50% */
  --translateX: 50%;
  --translateY: -50%;
}

.fruit-3 {
  transform: translate(35%, 65%); /* 替代原left:35% + top:65% */
  --translateX: -35%;
  --translateY: -65%;
}

.fruit-4 {
  transform: translateX(10%); /* 替代原left:10% */
  --translateX: -30%;
  --translateY: 30%;
  --rotate: -45deg;
}

2. 保留原动画关键帧

原动画逻辑无需修改，现在初始位置与动画位移的基准统一，会自动产生连续平滑的动画效果：

@keyframes fruitFlyIn {
  0% {
    opacity: 0;
    transform: translate(
        calc(var(--translateX) + 100%),
        calc(var(--translateY) + 100%)
      )
      rotate(-180deg) scale(0.5);
  }
  70% {
    opacity: 1;
    transform: translate(
        calc(var(--translateX) - 10%),
        calc(var(--translateY) - 10%)
      )
      rotate(20deg) scale(1.1);
  }
  85% {
    transform: translate(
        calc(var(--translateX) + 5%),
        calc(var(--translateY) + 5%)
      )
      rotate(-10deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(var(--translateX), var(--translateY))
      rotate(var(--rotate, 0deg)) scale(1);
  }
}

原理说明 #

修改后，元素的初始位置和动画位移均基于自身尺寸计算，动画的每一个关键帧都会产生连续的视觉变化。--translateX和--translateY的负值会抵消初始的transform偏移，最终让元素停留在预期位置，彻底解决fruit-1动画停滞的问题。

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