html网页内图片位置经过多次刷新位置会偏移原来的位置，再刷新几次之后又回来了是什么情况？

我用html网页制作了一个可视化页面，其中有两个图片是旋转的，但是这两个图片位置偶尔会偏移，有时候是刚打开页面位置就偏的，有时候是经过多次刷新位置会偏移原来的位置，但是再刷新几次之后又回来了是什么情况？
正常的图片是这样的：

但是有时候会变成这样：

地图后面的背景图位置回偏移
HTML部分代码：

 <div class="col-xs-4">
                    <div class="map">
                        <div class="map1"></div>
                        <div class="map2"></div>
                        <div class="map3"></div>
                        <div class="chart"></div>
                    </div>

map2、3是这两个会偏移的图片，chart是echarts地图
css部分代码（用的less写的）：

.map {
  position: relative;
  height: 4.125rem;

  .map1 {
    width: 3.475rem;
    height: 3.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/map.png);
    background-size: 100% 100%;
    opacity: 0.4;
  }

  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.0375rem;
    height: 4.0375rem;
    background: url(../images/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 1;
    background-size: 100% 100%;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.8rem;
    height: 3.8rem;
    background: url(../images/jt.png);
    animation: rotate2 10s linear infinite;
    opacity: 0.8;
    background-size: 100% 100%;
  }

  .chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.525rem;
  }

  @keyframes rotate1 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate2 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

请问各位有没有知道什么原因的