CSS небольщая анимация

264

15 июня 2018, 15:30

есть такой файл и есть задача сделать, что-бы эти элементы просто крутились. как в этом видео: https://youtu.be/bHehkFPLvc0?t=136 только без остановки)

Answer 1

* { 
  margin: 0; 
} 
 
html, 
body { 
  height: 100%; 
  max-width: 100%; 
  overflow: hidden; 
  perspective: 600px; 
} 
 
.items { 
  width: 40vw; 
  height: 40vw; 
  margin: 2vw auto; 
  transform: rotateX(30deg); 
  perspective: 600px; 
  outline:3px solid red; 
} 
 
section { 
  width: 100%; 
  height: 100%; 
  margin: -30px -40px; 
  white-space: nowrap; 
} 
 
.items span { 
  display: inline-block; 
  width: 30px; 
  height: 90%; 
  margin: 10px; 
  background: green; 
  animation: move 4s linear infinite; 
  transform: translate(-0, 0)rotateX(-30deg) 
} 
 
@keyframes move { 
  0% { 
    transform: translate(300px, 0)rotateX(-30deg) 
  } 
  100% { 
    transform: translate(-300px, 0)rotateX(-30deg) 
  } 
}

<div class="items"> 
  <section> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
  </section> 
</div>