如何解决HTML/CSS动画中GIF角色中途消失的问题？

核心问题原因 #

你把background-image放在了动画的0%关键帧里，但背景图不属于CSS可动画属性，动画运行到0%节点后，这个属性不会被持续保留，导致GIF中途消失。另外当前动画的top:0px设置也没让角色沿容器底部跑动。

修复步骤 #

1. 将background-image移到.container1的基础CSS规则中，确保整个动画周期内背景图持续显示
2. 调整定位属性，用bottom:0替代top:0，让角色沿容器底部跑动
3. 把动画的left值改为百分比计算式，适配不同宽度的容器，避免固定像素的兼容性问题

修改后的代码 #

CSS关键修改部分

.container1 {
  width: 140px;
  height: 140px;
  /* 将GIF背景图移到基础样式中 */
  background-image: url("tracer1.gif");
  animation-name: example;
  animation-duration: 5s;
  position: relative;
  animation-iteration-count: infinite;
  border: 3px solid white;
  /* 固定在容器底部 */
  bottom: 0;
}

@keyframes example {
  0% {
    left: 0px;
  }
  100% {
    /* 用百分比计算确保不超出容器 */
    left: calc(100% - 140px);
  }
}

补充说明

• calc(100% - 140px)保证GIF跑动到容器最右侧时，不会因自身宽度超出父容器范围
• 移除了动画中无效的top属性，改用bottom:0让角色固定在容器底部
• 背景图放在基础样式后，动画过程中会一直保持显示，不会中途消失

额外优化建议 #

• 可添加background-size: contain到.container1中，让GIF更好地适配容器尺寸
• 加入animation-timing-function: linear，让跑动速度保持均匀，提升动画流畅度

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