如何在變換屬性的縮放，變換，旋轉等方面給予不同的延遲時間。

Question

這是不正確的方式做我知道，它不工作了它只是爲了理解我的問題。

div 
{ 
    transform: rotate(0deg) translate(0); 
    transition:rotate 0.2s linear, translate 0.3s linear 0.2s; 
} 
div:hover 
{ 
    transform: rotate(60deg) translate(40); 
} 

Answer 1

按照css3標準，它不可能實現你提到的相同。相反，你可以做出這樣的事情。

<div class="outer"> 
<div class="inner"> 
</div> 
</div> 



.outer 
{ 
    height:30px; 
    width:30px; 
    transform:translateX(0); 
    transition:transform 2s linear; 
} 
.inner{ 
    width: inherit; height: inherit; 
    transform: rotate(0deg); 
    transition:transform 2s linear; 
    background:blue 
} 
.outer:hover 
{ 
    transform: translateX(140px); 
} 
.outer:hover .inner 
{ 
    transform: rotate(160deg); 

}