animation实现小物体按照轨迹运动动画效果

最终效果如图：

做完发现其实是有点蠢的实现方案，但是目前自己没有找到更好的方法，（这玩意存在不同分辨率不按照轨迹来的问题），因为在实现的时候是用的一个背景图作为轨迹，每一个点是自己找出来的，图片缩放可能导致 车车不在轨迹上。

算了以后有时间在解决吧

代码：

html（react写的）

css

.miniTrain {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: myfirstMin 10s;
    left: 1102px;
    top: 368px;
    /*infinite  是循环播放*/
    -webkit-animation: myfirstMin 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
  @keyframes myfirstMin {
  25% {
    left: 1102px;
    top: 368px;
  }
  50% {
    left: 1008px;
    top: 277px;
  }
  75% {
    left: 899px;
    top: 220px;
  }
  100% {
    left: 868px;
    top: 220px;
  }
}

解决不同分辨率的话可以使用CSS3的 @media 查询（我这里是以1600px为分界值，可以按照自己需求改）

@media screen and (max-width: 1600px) {
  .miniTrain {
    width: 200px;
    height: 200px;
    position: absolute;
    animation: myfirstMin 10s;
    left: 1102px;
    top: 368px;
    -webkit-animation: myfirstMin 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
}

@media screen and (min-width: 1600px) {
  .miniTrain {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: myfirst 10s;
    left: 1292px;
    top: 368px;
    -webkit-animation: myfirst 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
}

@keyframes myfirst {
  25% {
    left: 1292px;
    top: 368px;
  }
  50% {
    left: 1208px;
    top: 277px;
  }
  75% {
    left: 1099px;
    top: 220px;
  }
  100% {
    left: 1068px;
    top: 220px;
  }
}

@keyframes myfirstMin {
  25% {
    left: 1102px;
    top: 368px;
  }
  50% {
    left: 1008px;
    top: 277px;
  }
  75% {
    left: 899px;
    top: 220px;
  }
  100% {
    left: 868px;
    top: 220px;
  }
}