在页面加载然后循环时延迟翻转卡片转换

Question

我脑子有点卡住了，现在似乎想不通。

我目前有四张翻转卡片，它们在悬停时垂直向下翻转。我在这里想要实现的是让翻转卡片在页面加载时向下翻转，一次一张接一张，没有悬停，然后一旦第四张卡片向下翻转，重置所有卡片，并循环同一组无限次地过渡。

我确定这是一些 crystal 明确的答案，但我的大脑目前无法理解。我对它进行了如此多的修改，以至于我刚刚将其重置为悬停状态。

P.S。对于 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

使用setInterval依次为动画添加class并使用jquerydelay方法在时间后删除相同的class。

使用下面的代码片段来实现相同的逻辑。注意：删除了所有 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>

Answer 2

您是否尝试仅使用 CSS 来执行此操作？如果是这样，您可以使用关键帧来创建 'auto-flip' 效果。这是更新后的 fiddle，它似乎打破了悬停状态。如果您还需要悬停状态，您可能需要使用 JS。我也可以提供帮助。编辑：在 fiddle 中，我将过渡原点更改为中心。我只是觉得动画效果更好看。

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

在页面加载然后循环时延迟翻转卡片转换

Delayed Flip-Card Transition on Page Load Then Loop

html

javascript

css

keyframe

css-animations