以下 CSS 工作正常,但我试图为翻转效果添加 1 或 2 秒的延迟。当您悬停它时,'.back' 是可见的,然后当您离开该区域时,'.front' 是可见的。我想添加一个延迟,这样当你离开该区域时,它需要一两秒钟才能返回到“.front”。这可能吗?
.panel {
width: 250px!important;
height: 250px;
margin: auto!important;
position: relative;
-webkit-perspective:1000px;
}
.card {
width: 100%!important;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
background-color:#fff;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
transition-delay: 2s;
}
.back p{
margin-top: 90px;
font-size: 20px;
text-align:center;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
transition-delay: 2s;
}
HTML
<li class="panel"><a href="{{link}}"><img class="front card" src="{{image}}" /></a><div class="back card"><p>{{model.user.full_name}}</p></div></li>
最佳答案
将transition-delay
添加到.card
- fiddle
.card {
-o-transition: all .5s 2s;
-ms-transition: all .5s 2s;
-moz-transition: all .5s 2s;
-webkit-transition: all .5s 2s;
transition: all .5s 2s;
}
关于CSS延迟过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21755425/