gpt4 book ai didi

CSS延迟过渡

转载 作者:太空宇宙 更新时间:2023-11-04 04:03:08 25 4
gpt4 key购买 nike

以下 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com