Чистая анимация поворота CSS не работает в бесконечном цикле

Прошло некоторое время с тех пор, как я задал вопрос здесь. Так что извините меня, если я сделаю что-то не так.

У меня проблема с CSS-анимация. Я хочу, чтобы моя анимация была продолжайте повторять это, но не теряя первоначальных эффектов. Однако похоже, что в моем коде или в поведении анимации CSS есть ошибка.

После его завершения определяется первый 2 анимации вращения (вращение, вращение). Цикл начинается, но новая анимация не такая, как раньше.

Моя цель — это создать анимацию вращения на 6 ящиках по порядку, по одному. Когда все ящики повернуты, они должны снова начать возвращаться в исходное состояние по порядку, один за другим.

Код:

/* -------------------------------------------------------- */
#loader {
  width: 240px;
  height: 100px;
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
  background-color: transparent;
}

.front,
.back {
  position: absolute;
  width: 80px;
  height: 50px;
  backface-visibility: hidden;
}


/* -------------------------------------------------------- */

#loader1 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader1 .inner {
  animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
  -webkit-animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
}

#loader1 .front {
  background-color: #db9834;
}

#loader1 .back {
  background-color: #3498db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader2 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader2 .inner {
  animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
  -webkit-animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
}

#loader2 .front {
  background-color: #db8834;
}

#loader2 .back {
  background-color: #3488db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader3 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader3 .inner {
  animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
  -webkit-animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
}

#loader3 .front {
  background-color: #db7834;
}

#loader3 .back {
  background-color: #3478db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader4 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader4 .inner {
  animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
  -webkit-animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
}

#loader4 .front {
  background-color: #db6834;
}

#loader4 .back {
  background-color: #3468db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader5 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader5 .inner {
  animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
  -webkit-animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
}

#loader5 .front {
  background-color: #db5834;
}

#loader5 .back {
  background-color: #3458db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader6 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader6 .inner {
  animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
  -webkit-animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
}

#loader6 .front {
  background-color: #db4834;
}

#loader6 .back {
  background-color: #3448db;
  transform: rotateY(180deg);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  16% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  16% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
  }
}

@-webkit-keyframes spinback {
  0% {
    -webkit-transform: rotateY(180deg);
  }
  16% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}

@keyframes spinback {
  0% {
    -webkit-transform: rotateY(180deg);
  }
  16% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
<div id = "loader">
  <div id = "loader1">
    <div class = "inner">
      <div class = "front">
      </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader2">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader3">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader4">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader5">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader6">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
</div>

Просто чтобы сделать его более понятным, я пытаюсь применить метод css flipcard:

https://www.w3schools.com/howto/howto_css_flip_card.asp

На div, чтобы создать впечатление, что что-то загружается...

Анимация только дает время для запуска ключевых кадров в нужное время, затем в ключевых кадрах я поворачиваю div и устанавливаю время ожидания, пока другие div не закончат свое вращение. Итак, формула 6 ящиков за 10 секунд, что будет где-то между (0% и 100%), поэтому (100 / 6 = 16,6), что я беру, анимация должна заканчиваться на 16% времени анимации.

spin 10s ease 1s infinite, spinback 10s ease 11s infinite это означает, что мы ждем 1 с, затем запускаем вращение на 10 с (в то же время мы ждали 11 с), затем запускаем вращение И в то же время снова запускаем вращение (проблема)
— Temani Afif 20.06.2019 11:02
html css css-animations
20.06.2019 10:59
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
1
1 488
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Сначала я бы упростил ваш код и использовал меньше HTML/CSS. Тогда я бы рассматривал только одну анимацию, где у меня будут оба состояния.

Анимация будет такой: первый флип, затем мы сохраняем первый цвет, затем второй флип, затем мы сохраняем второй цвет. Он разделен на 12 временные интервалы (1 + 5 + 1 + 5) (1+5 = 6 это количество div)

Если продолжительность S, то задержка должна быть кратна одному слоту S/12. Обратите внимание, что я использовал перспективу в преобразовании, чтобы избежать лишнего элемента:

#loader {
  width: 240px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

#loader>div {
  width: calc(100%/3);
  position: relative;
  transform-style: preserve-3d;
  animation: spin 6s linear var(--delay, 0s) infinite;
}

#loader>div:before,
#loader>div:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: var(--front, #db9834);
}

#loader>div:after {
  background-color: var(--back, #3498db);
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader>div:nth-child(2) {
  --front: #db8834;
  --back: #3488db;
  --delay: 0.5s;
}

#loader>div:nth-child(3) {
  --front: #db7834;
  --back: #3478db;
  --delay: 1s;
}

#loader>div:nth-child(4) {
  --front: #db6834;
  --back: #3468db;
  --delay: 1.5s;
}

#loader>div:nth-child(5) {
  --front: #db5834;
  --back: #3458db;
  --delay: 2s;
}

#loader>div:nth-child(6) {
  --front: #db4834;
  --back: #3448db;
  --delay: 2.5s;
}


@keyframes spin {
  0% {
    transform:perspective(500px) rotateY(0deg);
  }
  8.33%,
  50%{
    transform:perspective(500px) rotateY(180deg);
  }
  58.33% {
    transform:perspective(500px) rotateY(0deg);
  }
}
<div id = "loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Связанные вопросы для получения более подробной информации о разнице между perspective и perspective()

3D-преобразование CSS не работает, если в конце свойства задана перспектива.

перспектива и перевод Z движется по диагонали

Мы можем упростить еще больше, если изменим цвет div при вращении вместо двух элементов. Изменение должно быть сделано в половине слота, где мы делаем флип (первый и шестой) без какого-либо перехода, чтобы создать иллюзию:

#loader {
  width: 240px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

#loader>div {
  width: calc(100%/3);
  animation: 
    spin   6s linear var(--delay, 0s) infinite,
    colors 6s linear var(--delay, 0s) infinite;
  background-color: var(--front, #db9834);
}


/* -------------------------------------------------------- */

#loader>div:nth-child(2) {
  --front: #db8834;
  --back: #3488db;
  --delay: 0.5s;
}

#loader>div:nth-child(3) {
  --front: #db7834;
  --back: #3478db;
  --delay: 1s;
}

#loader>div:nth-child(4) {
  --front: #db6834;
  --back: #3468db;
  --delay: 1.5s;
}

#loader>div:nth-child(5) {
  --front: #db5834;
  --back: #3458db;
  --delay: 2s;
}

#loader>div:nth-child(6) {
  --front: #db4834;
  --back: #3448db;
  --delay: 2.5s;
}


@keyframes spin {
  0% {
    transform:perspective(500px) rotateY(0deg);
  }
  8.33%,
  50%{
    transform:perspective(500px) rotateY(180deg);
  }
  58.33% {
    transform:perspective(500px) rotateY(0deg);
  }
}
@keyframes colors {
  0%,4.15% {
    background-color: var(--front, #db9834);
  }
  4.16% {
    background-color: var(--back, #3498db);
  }
  54.15% {
    background-color: var(--back, #3498db);
  }
  54.16% {
    background-color: var(--front, #db9834);
  }
}
<div id = "loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Еще одно упрощение можно сделать с помощью фильтра, учитывая тот факт, что вы хотите иметь одинаковые оттенки цветов:

#loader {
  width: 240px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

#loader>div {
  width: calc(100%/3);
  animation: 
    spin   6s linear var(--delay, 0s) infinite,
    colors 6s linear var(--delay, 0s) infinite;
  background: 
    linear-gradient(#db9834 50%, #3498db 0);
  background-size: 100% 200%;
}


/* -------------------------------------------------------- */

#loader>div:nth-child(2) {
  filter: brightness(0.9);
  --delay: 0.5s;
}

#loader>div:nth-child(3) {
  filter: brightness(0.8);
  --delay: 1s;
}

#loader>div:nth-child(4) {
  filter: brightness(0.7);
  --delay: 1.5s;
}

#loader>div:nth-child(5) {
  filter: brightness(0.6);
  --delay: 2s;
}

#loader>div:nth-child(6) {
  filter: brightness(0.5);
  --delay: 2.5s;
}


@keyframes spin {
  0% {
    transform:perspective(500px) rotateY(0deg);
  }
  8.33%,
  50%{
    transform:perspective(500px) rotateY(180deg);
  }
  58.33% {
    transform:perspective(500px) rotateY(0deg);
  }
}
@keyframes colors {
  4.15% {
    background-position: top;
  }
  4.16%,
  54.15% {
    background-position:bottom;
  }
  54.16% {
    background-position: top;
  }

}
<div id = "loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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

Ух ты! это было больше, чем я ожидал в качестве ответа, который расширил мою перспективу, большое спасибо. :D

— Berker Yüceer 20.06.2019 12:31

также есть ли ссылка, которую вы можете предоставить, чтобы рассказать мне больше об этих типах использования переменных CSS? Кажется невероятно эффективным способом..

— Berker Yüceer 20.06.2019 12:36

@BerkerYüceer У меня на самом деле нет конкретной ссылки, но я ответил на множество вопросов, используя переменные CSS (stackoverflow.com/search?q=user%3A8620333+css+переменные), вы можете найти больше хитростей и деталей

— Temani Afif 20.06.2019 12:39

@BerkerYüceer единственная внешняя ссылка, которую я могу вам дать, это официальная спецификация, где они описаны: w3.org/TR/css-переменные/#синтаксис

— Temani Afif 20.06.2019 12:40

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

— Berker Yüceer 03.07.2019 16:16
20.06.2019 11:32

Подобная проблема уже описывалась на SO:Как сделать так, чтобы объект не возвращался в исходное положение после запуска анимации? Проблема в том, что в начале анимации объект возвращается в исходное состояние. Но я решил проблему иначе: просто объединил обе анимации в одну, и теперь оба разворота описываются одной функцией. Если вам точно нужны обе анимации, то переделайте, как указано в вопросе, на который я дал ссылку. Вот мой код:

#loader {
  width: 240px;
  height: 100px;
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
  background-color: transparent;
}

.front,
.back {
  position: absolute;
  width: 80px;
  height: 50px;
  backface-visibility: hidden;
}

#loader1 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader1 .inner {
  animation: spin 20s ease 0s infinite;
  -webkit-animation: spin 20s ease 0s infinite;
}

#loader1 .front {
  background-color: #db9834;
}

#loader1 .back {
  background-color: #3498db;
  transform: rotateY(180deg);
}

/* -------------------------------------------------------- */

#loader2 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader2 .inner {
  animation: spin 20s ease 1s infinite;
  -webkit-animation: spin 20s ease 1s infinite;
}

#loader2 .front {
  background-color: #db8834;
}

#loader2 .back {
  background-color: #3488db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader3 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader3 .inner {
  animation: spin 20s ease 2s infinite;
  -webkit-animation: spin 20s ease 2s infinite;
}

#loader3 .front {
  background-color: #db7834;
}

#loader3 .back {
  background-color: #3478db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader4 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader4 .inner {
  animation: spin 20s ease 3s infinite;
  -webkit-animation: spin 20s ease 3s infinite;
}

#loader4 .front {
  background-color: #db6834;
}

#loader4 .back {
  background-color: #3468db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader5 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader5 .inner{ 
  animation: spin 20s ease 4s infinite;
  -webkit-animation: spin 20s ease 4s infinite;
}

#loader5 .front {
  background-color: #db5834;
}

#loader5 .back {
  background-color: #3458db;
  transform: rotateY(180deg);
}


/* -------------------------------------------------------- */

#loader6 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader6 .inner {
  animation: spin 20s ease 5s infinite;
  -webkit-animation: spin 20s ease 5s infinite;
}

#loader6 .front {
  background-color: #db4834;
}

#loader6 .back {
  background-color: #3448db;
  transform: rotateY(180deg);
}


@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  8% {
    -webkit-transform: rotateY(180deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  
  58% {
    -webkit-transform: rotateY(0deg);
  }
  
  100% {
    -webkit-transform: rotateY(0deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  8% {
    -webkit-transform: rotateY(180deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  
  58% {
    -webkit-transform: rotateY(0deg);
  }
  
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
<div id = "loader">
  <div id = "loader1">
    <div class = "inner">
      <div class = "front">
      </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader2">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader3">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader4">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader5">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
  <div id = "loader6">
    <div class = "inner">
      <div class = "front"> </div>
      <div class = "back"> </div>
    </div>
  </div>
</div>

Он по-прежнему ломается в цикле, после завершения всей анимации и повторного запуска цвета начинают неправильно смещаться, и в следующем цикле это снова исправляет. проблема, вызванная этим, до сих пор мне неизвестна, однако я ценю усилия. Справляется со своей задачей, на уровне.

— Berker Yüceer 03.07.2019 16:13
22.06.2019 21:16

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

Отображать содержимое абзаца в списке
CSS Добавление нижнего поля к <tr>, имеющему цвет фона с границами
Как сделать так, чтобы моя таблица цен отображалась при нажатии кнопки?
Стилизация файла типа ввода внутри синтаксиса Laravel
Как изменить «x» и «y» холста?
Сделайте каждый класс уникальным
Свойство classList не существует для типа «GlobalEventHandlers» при использовании с angular typescript
Как сохранить фокус на первом поле ввода
Невозможно использовать переход для перемещения текста при наведении
Как я могу применить css для div внутри таблицы?

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

Текстовое поле ввода разрешает только число с плавающей запятой с максимальной длиной числа 5
Не запускается SweetAlert2, выдает ошибки?
Как настроить переменную в теле письма для однократного запуска?
Как добавить свойство href привязки к объекту Option?
Отображать содержимое абзаца в списке
CSS Добавление нижнего поля к <tr>, имеющему цвет фона с границами
Почему эта функция замены регулярного выражения создает разрывы строк в моем теле html?
Как отправить запрос GET на «Мой сервер XAMPP» с помощью AJAX в расширении Chrome
Сравните порядок двух элементов HTML
JavaScript/PHP: диалоговое окно предупреждения после успешного сохранения