Как сделать, поочередную, бесконечную анимацию , одинаковым элементам

Question

Делаю блок с анимациями, внутри 4 одинаковых элемента которые анимируются с помошью эфекта куба, при этом каждый элемент останавливается и после этого стартует анимация второго элемента. Вопрос: Как сделать, что бы это все было еще и бесконечно? Сейчас просто добавил несколько анимаций, но это такое...

.slider__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.slider__slide {
  overflow: hidden;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 49.6%;
          flex: 0 1 49.6%;
  min-height: 355px;
  -webkit-perspective: 800;
          perspective: 800;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
}

.slider__slide:nth-child(1),
.slider__slide:nth-child(2) {
  margin-bottom: 10px;
}

.slider__item {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotateX(0deg) translateZ(-113px);
          transform: rotateX(0deg) translateZ(-113px);
  -webkit-transform-origin: 50% 50% 0;
      -ms-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: cub 5s timing-function delay iteration-count direction forwards;
          animation: cub 5s timing-function delay iteration-count direction forwards;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.slider__img {
  -webkit-transform: translateZ(178px);
          transform: translateZ(178px);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.slider__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slider__info {
  top: -65px;
  z-index: 1;
  -webkit-transform: rotateX(90deg) translateZ(113px);
          transform: rotateX(90deg) translateZ(113px);
  position: relative;
  width: 92%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider__info a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider__logo {
  margin-bottom: 44px;
}

.slider__logo img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slider__name {
  font-weight: 700;
  font-size: 34px;
  line-height: 39px;
}

.slider__descr {
  margin-top: 25px;
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  max-width: 250px;
  text-align: center;
  letter-spacing: 1px;
}

.slider .arena {
  background: #55022b;
}

.slider .group {
  background: #077664;
}

.slider .club {
  background: #022a51;
}

.slider .andr {
  background: #01419d;
}

.slider .animate-1 {
  -webkit-animation: cub 5s 8s forwards, cub_1 5s 27s forwards, cub_2 5s 46s forwards, cub_3 5s 65s forwards;
          animation: cub 5s 8s forwards, cub_1 5s 27s forwards, cub_2 5s 46s forwards, cub_3 5s 65s forwards;
}

.slider .animate-2 {
  -webkit-animation: cub 5s 12s forwards, cub_1 5s 32s forwards, cub_2 5s 52s forwards, cub_3 5s 72s forwards;
          animation: cub 5s 12s forwards, cub_1 5s 32s forwards, cub_2 5s 52s forwards, cub_3 5s 72s forwards;
}

.slider .animate-3 {
  -webkit-animation: cub 5s 17s forwards, cub_1 5s 37s forwards, cub_2 5s 57s forwards, cub_3 5s 77s forwards;
          animation: cub 5s 17s forwards, cub_1 5s 37s forwards, cub_2 5s 57s forwards, cub_3 5s 77s forwards;
}

.slider .animate-4 {
  -webkit-animation: cub 5s 22s forwards, cub_1 5s 42s forwards, cub_2 5s 62s forwards, cub_3 5s 82s forwards;
          animation: cub 5s 22s forwards, cub_1 5s 42s forwards, cub_2 5s 62s forwards, cub_3 5s 82s forwards;
}

@-webkit-keyframes cub {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@keyframes cub {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@-webkit-keyframes cub_1 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@keyframes cub_1 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@-webkit-keyframes cub_2 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@keyframes cub_2 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@-webkit-keyframes cub_3 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@keyframes cub_3 {
  0% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }

  25% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  80% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(-90deg) translateY(113px);
            transform: rotateX(-90deg) translateY(113px);
  }

  100% {
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transform: rotateX(0deg) translateZ(-113px);
            transform: rotateX(0deg) translateZ(-113px);
  }
}

@media (max-width: 1200px) {
  * a:hover {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <title>Document</title>
</head>

<body>
    <main class="main-body">
        <section class="main">
            <div class="main__container container">
                <div class="main__animate">
                    <img src="img/logo.png" alt="">
                </div>
                <header class="header">
                    <div class="header__logo">
                        <img src="img/logo.png" alt="">
                    </div>
                    <nav class="header__nav nav">
                        <ul class="header__menu">
                            <li class="header__item"><a href="#" class="header__link">Арена</a></li>
                            <li class="header__item"><a href="#" class="header__link">ССГ</a></li>
                            <li class="header__item"><a href="#" class="header__link">Спортклуб в аренду</a></li>
                            <li class="header__item"><a href="#" class="header__link">Андромета</a></li>
                            <li class="header__item"><a href="#" class="header__link">Контакты</a></li>
                        </ul>
                    </nav>
                    <div class="header__contact">
                        <a class="header__tell" href="tel:+4843952424">(48439) 5-24-24</a>
                        <div class="header__mail">
                            <p>E-mail:</p>
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div>
                    </div>
                </header>
            </div>
            <div class="main__slider slider">
                <div class="slider__container container">
                    <div class="slider__slide">
                        <div class="slider__item animate-1">
                            <div class="slider__img">
                                <img src="img/slide-1.jpg" alt="Photo">
                            </div>
                            <div class="slider__info arena">
                                <a href="#">
                                    <div class="slider__logo">
                                        <img src="img/logo-aren.svg" alt="logo">
                                    </div>
                                    <div class="slider__name">
                                        Бизнес Центр Арена
                                    </div>
                                    <div class="slider__descr">
                                        Новые офисы в аренду
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="slider__slide">
                        <div class="slider__item animate-2">
                            <div class="slider__img">
                                <img src="img/slide-2.jpg" alt="Photo">
                            </div>
                            <div class="slider__info group">
                                <a href="#">
                                    <div class="slider__logo">
                                        <img src="img/logo-group.svg" alt="logo">
                                    </div>
                                    <div class="slider__name">
                                        Строй Сити Групп
                                    </div>
                                    <div class="slider__descr">
                                        Продажа и аренда коммерческих площадей
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="slider__slide">
                        <div class="slider__item animate-3">
                            <div class="slider__img">
                                <img src="img/slide-3.jpg" alt="Photo">
                            </div>
                            <div class="slider__info club">
                                <a href="#">
                                    <div class="slider__name">
                                        Спортклуб в аренду
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="slider__slide">
                        <div class="slider__item animate-4">
                            <div class="slider__img">
                                <img src="img/slide-4.jpg" alt="Photo">
                            </div>
                            <div class="slider__info andr">
                                <a href="#">
                                    <div class="slider__logo">
                                        <img src="img/logo-andr.svg" alt="logo">
                                    </div>
                                    <div class="slider__name">
                                        Андромета
                                    </div>
                                    <div class="slider__descr">
                                        Быстровозводимые здания для вашего бизнеса
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

Делаю блок с анимациями, внутри 4 одинаковых элемента которые анимируются с помошью эфекта куба, при этом каждый элемент останавливается и после этого стартует анимация второго элемента. Вопрос: Как сделать, что бы это все было еще и бесконечно?

БЛОГ НА HUSL

Как сделать, поочередную, бесконечную анимацию , одинаковым элементам

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