Задержка перехода флип-карты при загрузке страницы и цикле

Question

У меня здесь небольшой блок мозгов, и я не могу понять, на данный момент, чтобы это понять.

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

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

PS извините за CSS-беспорядок, я вроде отпустил его во многих попытках найти решение.Любая помощь очень ценится! *

Вот HTML:

<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
    </div>
    <div class="flip-card-back1">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
    </div>
    <div class="flip-card-back2">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card3">
  <div class="flip-card-inner3">
    <div class="flip-card-front3">
    </div>
    <div class="flip-card-back3">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
    </div>
    <div class="flip-card-back4">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

А вот CSS:

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}


.flip-card1:hover .flip-card-inner1 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;

}


.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;  
}


.flip-card3:hover .flip-card-inner3 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card4:hover .flip-card-inner4 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

Вот он в jsfiddle

Answer 1

Вы пытаетесь сделать это только с помощью CSS?Если это так, вы можете использовать ключевые кадры для создания эффекта «автоматического переворачивания».Вот обновленная скрипка , похоже, нарушает состояние наведения.Если вам также нужно состояние наведения, вам может понадобиться использовать JS.С чем я тоже могу помочь.Редактировать: в скрипке я меняю начало перехода в центр.Я просто думал, что с анимацией это выглядело лучше.

@keyframes flip {
      0% {
        transform: rotatex(0deg)
      }
      25% {
        transform: rotatex(-180deg)
      }
      50% {
        transform: rotatex(0deg)
      }
      100% {
        transform: rotatex(0deg)
      }
}

Answer 2

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

используйте приведенный ниже фрагмент кода для той же логики.ПРИМЕЧАНИЕ: удалены все селекторы hover.

$(document).ready(function(){
  var i = 0;
  setInterval(function(){
  
   $(".flip-card-inner"+ i).addClass("hoverit").delay( 1000 - (i*20) ).queue(function(){
      $(this).removeClass("hoverit").dequeue();
   });

  if(i == 4) {
    i = 0;
  }
  i++;
     
  }, 1000);
  
});

.hoverit {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}

.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
 
}



/*FLIP-CARD2 ANIMATION*/
.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;   
}

.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
    
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}
/*FLIP-CARD4 ANIMATION*/
.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;    
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
    </div>
    <div class="flip-card-back1">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
    </div>
    <div class="flip-card-back2">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>
    

<div class="flip-card3">
  <div class="flip-card-inner3">
    <div class="flip-card-front3">
    </div>
    <div class="flip-card-back3">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

    
<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
    </div>
    <div class="flip-card-back4">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>