Discontinuous animation under IE

clipboard.png
IE

clipboard.png

    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)
      }
    }
    
    

look at the version of IE

Internet Explorer 10, Firefox, and Opera support @ keyframes rules and animation attributes.

Chrome and Safari require the prefix-webkit-.

Note: Internet Explorer 9, and earlier versions, do not support the @ keyframe rule or the animation attribute.

Menu