Перевернуть несколько изображений одно за другим после некоторой задержки

На своем веб-сайте я хочу создать анимацию CSS, в которой я пытаюсь перевернуть несколько изображений одно за другим после задержки в 1 секунду, но это не работает. Когда первое изображение переворачивается, второе изображение должно переворачиваться, затем третье и так далее.

Как это, но при загрузке. Каждое изображение должно переворачиваться одно за другим. Предположим, есть 4 изображения. 1-е изображение переворачивается с задержкой: 0, затем второе изображение переворачивается с задержкой: 1 и так далее до четвертого изображения с задержкой: 4.

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.appendChild(arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
      }
    }, 0, target);
  };

  var target = document.getElementById("rotator2");
  var arr = target.getElementsByTagName("a");

  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

}, false);
#stage2 {
  margin: 2em auto 1em 50%;
  height: 240px;
  -webkit-perspective: 1200px;
  -webkit-perspective-origin: 0 50%;
  -moz-perspective: 1200px;
  -moz-perspective-origin: 0 50%;
  -ms-perspective: 1200px;
  -ms-perspective-origin: 0 50%;
}

#rotator2 a {
  position: absolute;
  left: -151px;
  -moz-transform-style: preserve-3d;
}

#rotator2 a img {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

#rotator2 a:nth-child(1) img {
  -webkit-transform: rotateY(-120deg) translateZ(80px);
  -moz-transform: rotateY(-120deg) translateZ(80px);
  -ms-transform: rotateY(-120deg) translateZ(80px);
}

#rotator2 a:nth-child(2) img {
  -webkit-transform: translateZ(80px);
  -moz-transform: translateZ(80px);
  -ms-transform: translateZ(80px);
}

#rotator2 a:nth-child(3) img {
  -webkit-transform: rotateY(120deg) translateZ(80px);
  -moz-transform: rotateY(120deg) translateZ(80px);
  -ms-transform: rotateY(120deg) translateZ(80px);
}

#rotator2 a:nth-child(n+4) {
  display: none;
}

@-webkit-keyframes rotator2 {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-120deg);
  }
}

@-moz-keyframes rotator2 {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-120deg);
  }
}

@-ms-keyframes rotator2 {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(-120deg);
  }
}

#rotator2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform-style: preserve-3d;
  -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -moz-animation-duration: 2s;
  -moz-animation-delay: 1s;
  -ms-transform-origin: 0 0;
  -ms-transform-style: preserve-3d;
  -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -ms-animation-duration: 2s;
  -ms-animation-delay: 1s;
}

#rotator2:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
}
<div id = "stage2">
  <div id = "rotator2" style = "-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
    <a href = "1.jpg"><img src = "img/1.jpg" width = "280" alt  = "1"></a>
    <a href = "2.jpg"><img src = "img/2.jpg" width = "280" alt  = "2"></a>
    <a href = "3.jpg"><img src = "img/3.jpg" width = "280" alt  = "3"></a>
    <a href = "4.jpg"><img src = "img/4.jpg" width = "280" alt  = "4"></a>
    <a href = "5.jpg"><img src = "img/5.jpg" width = "280" alt  = "5"></a>
    <a href = "6.jpg"><img src = "img/6.jpg" width = "280" alt  = "6"></a>
    <a href = "7.jpg"><img src = "img/7.jpg" width = "280" alt  = "7"></a>
    <a href = "8.jpg"><img src = "img/8.jpg" width = "280" alt  = "8"></a>
  </div>
  </div>

Здесь 1-е изображение постоянно переворачивается

У вас уже есть код? Если да, нам будет проще, если вы предоставите нам уже существующий код.

— Malte Kölle 11.02.2019 11:40

Итак, ваша проблема в том, что анимация повторяется? Вы пробовали animation-fill-mode: forwards?

— Dominic 11.02.2019 12:09

Я не уверен, что вы пытаетесь сделать с кодом js, но для задержки вы можете использовать animation-delay, не так ли?

— Mosh Feu 11.02.2019 12:09

Изображения расположены рядом, и это должно вызвать цепную реакцию.

— Keval 11.02.2019 12:16

@MalteKölle, вы можете рассмотреть это

— Keval 11.02.2019 12:27

Kavel, анимация в w3schools отличается от твоего кода. Это специально? (Не только время, но и начало вращения)

— Mosh Feu 11.02.2019 12:32

это не проблема @MoshFeu

— Keval 11.02.2019 12:36
javascript html css css-animations css-transforms
11.02.2019 11:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
1 045
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если я вас правильно понял, как я уже сказал, вы можете использовать animation-delay. Значение будет

(card index) * animation-duration.

<!DOCTYPE html>
<html>

<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .flip-card {
      display: inline-block;
      background-color: transparent;
      width: 300px;
      height: 300px;
      perspective: 1000px;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    
    .flip-card-front {
      background-color: #bbb;
      color: black;
      z-index: 2;
    }
    
    .flip-card-back {
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg);
      z-index: 1;
    }
    
    .flip-card .flip-card-inner {
      animation: rotate 3s .3s infinite;
    }
    
    .flip-card:nth-child(2) .flip-card-inner {
      animation-delay: .6s;
    }
    
    .flip-card:nth-child(3) .flip-card-inner {
      animation-delay: .9s;
    }
    
    .flip-card:nth-child(4) .flip-card-inner {
      animation-delay: 1.2s;
    }
    
    @keyframes rotate {
      0%, 60% {
        transform: rotateY(0);
      }
      10%, 50% {
        transform: rotateY(180deg);
      }
    }
  </style>
</head>

<body>

  <h1>Card Flip with Text</h1>
  <h3>Hover over the image below:</h3>

  <div class = "cards">
    <div class = "flip-card">
      <div class = "flip-card-inner">
        <div class = "flip-card-front">
          <img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Avatar" style = "width:300px;height:300px;">
        </div>
        <div class = "flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
    <div class = "flip-card">
      <div class = "flip-card-inner">
        <div class = "flip-card-front">
          <img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Avatar" style = "width:300px;height:300px;">
        </div>
        <div class = "flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
    <div class = "flip-card">
      <div class = "flip-card-inner">
        <div class = "flip-card-front">
          <img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Avatar" style = "width:300px;height:300px;">
        </div>
        <div class = "flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
    <div class = "flip-card">
      <div class = "flip-card-inner">
        <div class = "flip-card-front">
          <img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Avatar" style = "width:300px;height:300px;">
        </div>
        <div class = "flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Обновлять

Чтобы запустить его бесконечно, анимация должна рассчитываться по-другому, потому что она должна заботиться об обратной анимации.

Расчет

0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.

So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.

Вот жизненный цикл:

|---|---|---|---|---|---|---|---|---|---|

|___|___|___|___|___|___|___|___|___|___|
Front w   w   w   w  Back w   w   w   w
 .3s .3s .3s .3s .3s .3s .3s .3s .3s .3s 
|_______________________________________|
                   3s

как добавить бесконечный цикл в это. После того, как последний сначала должен перевернуться, я попробовал flip-card .flip-card-inner { animation: rotate .3s .3s forwards infinite; }, но он переворачивается все вместе

— Keval 12.02.2019 05:54

Это немного сложнее. Я только что обновил свой ответ. Надеюсь, это достаточно ясно.

— Mosh Feu 12.02.2019 15:18

Разобрался вчера с /* animation */ .flip-card .flip-card-inner { animation: rotate 20.0s forwards infinite ; } /* adding delay for chain recation effect*/ .flip-card:nth-child(2) .flip-card-inner { animation-delay: 5s; } .flip-card:nth-child(3) .flip-card-inner { animation-delay: 10s; } .flip-card:nth-child(4) .flip-card-inner { animation-delay: 15s; } поменял задержку между теми картами

— Keval 13.02.2019 06:52

Здорово! Рад слышать.

— Mosh Feu 13.02.2019 11:11
11.02.2019 14:24

Вы можете просто использовать этот код, прикрепленный ниже трюка HTML и CSS:

<div class = "c-searchblock_loop">
            <div class = "c-searchblock_loop-content">
                <div class = "c-searchblock_chevron">
                    <svg class = "c-icon">
                        <use xlink:href = "https://www.subachahai.com/dist/assets/icons/icons-sprite.svg#icon-chevron"></use>
                    </svg>
                </div>
                <div class = "c-searchblock_image -first">
                    <img src = "https://www.subachahai.com/dist/assets/images/searchblock-1.png" alt = "tools-1">
                </div>
                <div class = "c-searchblock_image -back -second">
                    <img src = "https://www.subachahai.com/dist/assets/images/searchblock-2.png" alt = "tools-2">
                </div>
                <div class = "c-searchblock_image -third">
                    <img src = "https://www.subachahai.com/dist/assets/images/searchblock-3.png" alt = "tools-3">
                </div>
                <div class = "c-searchblock_image -back -fourth">
                    <img src = "https://www.subachahai.com/dist/assets/images/searchblock-4.png" alt = "tools-4">
                </div>
            </div>
        </div>

CSS:

.c-searchblock_chevron {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.c-searchblock_chevron, .c-searchblock_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.c-searchblock_image.-first {
    -webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
    animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
}
.c-searchblock_image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50% -25px;
    transform-origin: 50% 50% -25px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.c-searchblock_chevron, .c-searchblock_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.c-searchblock_image.-back.-second {
    -webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
    animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
    -webkit-transform-origin: 50% 50% 25px;
    transform-origin: 50% 50% 25px;
    -webkit-transform: rotateY(
180deg);
    transform: rotateY(
180deg);
}
.c-searchblock_image.-third {
    -webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
    animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back.-fourth {
    -webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
    animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
    -webkit-transform-origin: 50% 50% 25px;
    transform-origin: 50% 50% 25px;
    -webkit-transform: rotateY(
180deg);
    transform: rotateY(
180deg);
}
.c-searchblock.is-active .c-searchblock_footer,
.c-searchblock.is-active .c-searchblock_loop {
    -webkit-transform: translate(0);
    transform: translate(0)
}
.c-searchblock_loop {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 180px;
    -webkit-perspective: 200px;
    perspective: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
    transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
    transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
    transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s, -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s
    margin: 50px auto;
}
.editMode .c-searchblock_loop {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none
}
.c-searchblock_loop-content {
    width: 100%;
    height: 100%;
    -webkit-animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite;
    animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite
}
.c-searchblock_chevron,
.c-searchblock_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.c-searchblock_chevron {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
.c-searchblock_chevron svg {
    fill: #fff;
    width: 120px;
    height: 110px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
@-webkit-keyframes loop {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    25% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    75% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    to {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
}
@keyframes loop {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    25% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    75% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    to {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
}
@-webkit-keyframes loop-first {
    0% {
        opacity: 1
    }
    25% {
        opacity: 1
    }
    26% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    76% {
        opacity: 1
    }
    to {
        opacity: 1
    }
}
@keyframes loop-first {
    0% {
        opacity: 1
    }
    25% {
        opacity: 1
    }
    26% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    76% {
        opacity: 1
    }
    to {
        opacity: 1
    }
}
@-webkit-keyframes loop-second {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    51% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}
@keyframes loop-second {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    51% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}
@-webkit-keyframes loop-third {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0
    }
    26% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    76% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}
@keyframes loop-third {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0
    }
    26% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    76% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}
@-webkit-keyframes loop-fourth {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    51% {
        opacity: 1
    }
    to {
        opacity: 1
    }
}
@keyframes loop-fourth {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    51% {
        opacity: 1
    }
    to {
        opacity: 1
    }
}
@-webkit-keyframes loop-image-back {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    25% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    50% {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
    75% {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
    to {
        -webkit-transform: rotateY(540deg);
        transform: rotateY(540deg)
    }
}
@keyframes loop-image-back {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    25% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    50% {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
    75% {
        -webkit-transform: rotateY(1turn);
        transform: rotateY(1turn)
    }
    to {
        -webkit-transform: rotateY(540deg);
        transform: rotateY(540deg)
    }
}

Пожалуйста, отредактируйте свой ответ и переместите объяснение из блока кода.

— Ivan Barayev 14.09.2021 23:20

Конечно, но это для того, чтобы помочь новым разработчикам лучше понять. :)

— Areeb Saeed Raja 22.09.2021 01:47
14.09.2021 20:04

Другие вопросы по теме

Как передать значения в html из фляги с помощью библиотеки кодеков
Как я могу создать div в CSS, который выходит за пределы родительского ограничения, но не изменяет размер родительского div?
PHP: чтение одной таблицы из нескольких таблиц
Угловая двусторонняя привязка для имени пользователя и username_confirm
Изменение полноэкранных разделов с помощью translateX
Html-таблица с первым столбцом фиксированного размера и остальными столбцами одинакового размера
Генерация html-кода, специфичного для asp-ядра, включая asp-атрибуты
GetElementsByClassName не работает в условии if
Ng-style не работает с min, а ng-model отрицательный
Псевдокласс :hover после псевдокласса :after. Что такое обходной путь?

Похожие вопросы

Как cc_load_policy работает в youtube iframe Player API для отображения субтитров?
Выберите элементы, имеющие атрибут href, не начинающийся со строки
Как исправить проблему с закрытием раскрывающегося списка, когда я нажимаю за его пределами
Какова цель void this в функции javascript
Twilio CLient JS Token не разрешает исходящие вызовы
Группа Select2 с бесконечной прокруткой
Как я могу показать ход выполнения JavaScript на веб-странице?
События javascript MOUSEOVER и CLICK во время мобильного симулятора
Запутался в window.RemoveEventListener, если он удалит функцию
Нажмите для массива, не работающего внутри цикла в Javascript