SVG动画元素随窗口自适应且位置固定及移动Safari动画兼容问题

问题1：rails元素自适应宽度且不位移的解决方案 #

首先给绝对定位元素的共同父容器.trein-animatie添加position: relative，所有绝对定位的子元素会以该父容器为基准定位，不会随视口乱跑。然后修改rails元素样式：

• 移除固定宽度width:1300px，替换为width: 100%
• 把right: 0改为left: 0，确保轨道始终从父容器左侧开始铺满
• 可以额外添加object-fit: cover保证轨道图片比例正常，同时微调top值匹配火车底部高度，确保火车始终落在轨道上。

问题2：低版本移动Safari动画兼容解决方案 #

低版本Safari对left属性动画的兼容很差，且容易触发性能问题导致动画失效，建议替换为transform属性实现位移动画，同时补全前缀、开启GPU加速：

1. 动画的位移属性从left改为transform: translateX()，同时补全-webkit-前缀
2. 给动画元素.trein添加transform: translateZ(0)强制开启GPU加速，规避低版本Safari渲染bug
3. 可以添加animation-fill-mode: forwards（以及对应-webkit-前缀）保证动画结束后保持最终状态，不会回弹。

完整修改后代码 #

CSS代码

/* 给父容器添加relative，作为绝对定位基准 */
.trein-animatie {
  position: relative;
  overflow: hidden; /* 可选，隐藏动画过程中超出容器的部分 */
  height:300px;
  width:auto;
  background-image: url("https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Landschap_volgpagina.svg");
  background-position:center;
  background-size:cover;
}

.rails img {
  position:absolute;
  width:100%; /* 替换固定宽度为100%占满父容器 */
  left:0; /* 改为左对齐，适配父容器宽度 */
  top:238px; /* 可以根据实际轨道位置微调这个值 */
  object-fit: cover; /* 保证图片比例正常 */
}

.bord {
  position:absolute;
  width:175px;
  height:auto;
  left:10%;
  top:51px;
}
.wagon {
  width:250px;
  height:auto;
  position:absolute;
  top:155px;
}
.locomotief {
  width:270px;
  height:auto;
  position:absolute;
  left:250px;
  top:47px;
}

.trein {
  position:absolute;
  top:0px;
  left:7%;
  -webkit-transform: translateZ(0); /* 开启GPU加速 */
  transform: translateZ(0);
  /* 合并动画写法，添加fill-mode */
  -webkit-animation: binnenrijden 3s linear forwards;
  animation: binnenrijden 3s linear forwards;
}
@-webkit-keyframes binnenrijden {
  0% {
    -webkit-transform: translateX(-600px); /* 用transform替换left */
  }
  100% {
    -webkit-transform: translateX(0); /* 初始left已经是7%，位移0就对应最终位置 */
  }
}
@keyframes binnenrijden {
  0% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(0);
  }
}

HTML代码

<div class="trein-animatie">
  <div class="bord"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Modulebord_1.svg"></div>
  <div class="trein">
    <div class="wagon"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Wagon_module_1_De_opgeruimde_werkplek.svg"></div>
    <div class="locomotief"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Locomotief_witte_rand.svg"></div>
  </div>
  <div class="rails"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Logo_roze_groen.png"></div>
</div>

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