Использование анимации по ключевым кадрам для плавного изменения полей изображений для отображения горизонтального движения вперед и назад без дрожания - PullRequest
Новая
       32

Использование анимации по ключевым кадрам для плавного изменения полей изображений для отображения горизонтального движения вперед и назад без дрожания

0 голосов
/ 14 апреля 2020

Я пытаюсь анимировать несколько изображений, чтобы они были на одинаковом расстоянии друг от друга, а затем плавно вычислим sh их все вместе. ex) 


<html>
<head>
   <style>
      .x1 {

       animation-name: margintanimate;
       animation-duration: 6s;
       animation-timing-function: ease-in-out;
       animation-iteration-count: infinite;
       animation-direction: alternate; 
      }
      @keyframes margintanimate  {
        from {     margin-right: 6px;     }
        to   {     margin-right: -4px;   }
     }
      }
   </style>
</head>
<body>


 <img   class="x1" src="https://via.placeholder.com/100x100"  >
 <img  class="x1" src="https://via.placeholder.com/100x100"  >
 <img  class="x1" src="https://via.placeholder.com/100x100"  >
 <img  class="x1" src="https://via.placeholder.com/100x100"  >
</body>
</html>

https://jsfiddle.net/k20c31ur/

Я безуспешно искал решения, позволяющие избавиться от лишних слов в анимации - кто-нибудь может предложить решение?

...