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

Question

我的大脑有点堵塞，目前似乎无法解决这个问题。

目前，我有四张在悬停时垂直向下翻转的翻转卡。我在这里试图实现的是，让翻转卡在页面加载时向下翻转，一次一个，没有悬停，然后一旦第四张卡向下翻转，重置所有，并无限循环相同的转换集。

我确信这是一个非常清晰的答案，但我的大脑目前还没有理解。我对它做了很多修改，所以我只是把它重新设置为悬停。

附言：很抱歉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为连续的动画添加类，并使用jquerydelay方法在一段时间后删除相同的类。

对相同的逻辑使用下面的代码片段。注意：已删除所有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来实现这一点吗？如果是这样，您可以使用关键帧来创建"自动翻转"效果。这是最新的fiddle，它似乎打破了悬停状态。如果您还需要悬停状态，则可能需要使用JS。我也可以帮忙。编辑：在小提琴中，我将过渡原点更改为中心。我只是觉得动画效果更好。

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