CSS延遲轉換

下面的CSS可以正常工作，但是我試圖給翻轉效果增加1或2秒的延遲。當你將它懸停時，'.back'是可見的，然後當你離開這個區域時'.front'。我想添加一個延遲，以便當您離開該區域時，需要一兩秒鐘才能返回到'.front'這可能嗎？CSS延遲轉換

.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>

來源

2014-02-13 Alex

添加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; 
}

來源

2014-02-13 13:39:56 Adrift

.panel .front { 
    transition: all 2s; 
}

你必須把元素的作用，以把它轉換回徘徊不上。

來源

2014-02-13 13:31:53 FoX

CSS延遲轉換

回答

相關問題