Простая анимация карусели

Question

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

#container {
  overflow: hidden;
  width: 600px;
  background-color: beige;
  border: 2px solid burlywood;
}

.block {
  overflow: hidden;
  width: 30%;
  height: 300px;
  margin: 2% 0 2% 2%;
  background-color: bisque;
  border: 2px solid gray;
}

.block__img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid gray;
}

.block__img img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  display: flex;
  width: 162%;
}

<div id="container">
  <div class="container">
    <div class="block">
      <div class="block__img">
        <img src="https://sun9-53.userapi.com/c858528/v858528794/8486e/MwR-Ahz0ito.jpg?ava=1">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1167886967209525249/enstjIEU_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/mainimage200x200/podelki_na_temu_cirk.jpg.crop_display.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1161015332661878786/xIcHG_5o_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/27/2015-07-18_0942/mainimage200x200/k_chemu_snitsya_cirk.jpg.crop_display.jpg">
      </div>
    </div>
  </div>
</div>

Answer 1

(function move() {
  var container = document.querySelector('.container'),
    block = container.querySelector('.block');
  container.classList.remove("active");
  container.appendChild(block);
  window.setTimeout(move, 3000);
  window.setTimeout(function() {
    container.classList.add("active")
  }, 1);
})();

#container {
  overflow: hidden;
  width: 600px;
  background-color: beige;
  border: 2px solid burlywood;
}

.block {
  overflow: hidden;
  width: 30%;
  height: 300px;
  margin: 2% 0 2% 2%;
  background-color: bisque;
  border: 2px solid gray;
  transform: translateX(0%);
  transition: 1s;
}

.block__img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid gray;
}

.block__img img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  display: flex;
  width: 162%;
  transform: translateX(0%);
}

.container.active .block:nth-child(1) {
  transform: translateX(-120%);
  animation: elem 1s linear;
}

@keyframes elem {
  0% {
    transform: translateX(0%);
  }
  70% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-120%);
  }
}

.container.active {
  transition: 1s 1s;
  transform: translateX(-20%);
}

<div id="container">
  <div class="container">
    <div class="block">
      <div class="block__img">
        <img src="https://sun9-53.userapi.com/c858528/v858528794/8486e/MwR-Ahz0ito.jpg?ava=1">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1167886967209525249/enstjIEU_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/mainimage200x200/podelki_na_temu_cirk.jpg.crop_display.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1161015332661878786/xIcHG_5o_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/27/2015-07-18_0942/mainimage200x200/k_chemu_snitsya_cirk.jpg.crop_display.jpg">
      </div>
    </div>
  </div>
</div>

Answer 2

(function move() {
  var container = document.querySelector('.container'),
    block = container.querySelector('.block');
  container.classList.remove("active");
  container.appendChild(block);
  window.setTimeout(move, 3000);
  window.setTimeout(function() {
    container.classList.add("active")
  }, 1);
})();

#container {
  overflow: hidden;
  width: 600px;
  background-color: beige;
  border: 2px solid burlywood;
}

.block {
  overflow: hidden;
  width: 30%;
  height: auto;
  margin: 2% 0 2% 2%;
  background-color: bisque;
  border: 2px solid gray;
  transition: 1s;
}

.block__img {
  width: 100%;
  height: auto;
}

.block__img img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  display: flex;
  width: 162%;
}

.container.active .block:nth-child(1) {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  animation: elem 2s linear;
}

@keyframes elem {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(720deg) scale(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-200%);
  }
}

.container.active {
  transition: 1s 1s;
  transform: translateX(-20%);
}

<div id="container">
  <div class="container">
    <div class="block">
      <div class="block__img">
        <img src="https://sun9-53.userapi.com/c858528/v858528794/8486e/MwR-Ahz0ito.jpg?ava=1">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1167886967209525249/enstjIEU_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/mainimage200x200/podelki_na_temu_cirk.jpg.crop_display.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://pbs.twimg.com/profile_images/1161015332661878786/xIcHG_5o_400x400.jpg">
      </div>
    </div>
    <div class="block">
      <div class="block__img">
        <img src="https://womanadvice.ru/sites/default/files/27/2015-07-18_0942/mainimage200x200/k_chemu_snitsya_cirk.jpg.crop_display.jpg">
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Простая анимация карусели

Ответы (2 шт):