IE下动画不连续

Question

IE下是这种效果

谷歌下面是这种

    HTML
   <ul class="amin">
    <li class="amin_list">
      <img src="@/common/img/wave.png" style="width:100vw;" alt="" srcset="">
    </li>
    <li class="amin_list">
      <img src="@/common/img/wave.png" style="position:relative;left:-3px;width:100vw;" alt="" srcset="">
    </li>
    <li class="amin_list">
      <img src="@/common/img/wave.png" style="position:relative;left:-6px;width:100vw;" alt="" srcset="">
    </li>
  </ul>
  JS
  .amin
    position: absolute
    // display:flex
    width: 300vw
    height: 10vh
    animation: wave 1.5s linear infinite
    .amin_list
      float left
    @keyframes wave {
      from {
        transform: translateX(0)
      }
      to {
        transform: translateX(-100vw)
      }
    }
    实现的效果就是波浪图片一直做左移
    现在出现了新的情况，我改变窗口大小后，动画就正常了

Answer 1

看看IE的版本

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。