CSS3多個轉換顛倒動畫

Question

我有一個div我想用CSS動畫。

div { 
    width:100px; 
    height:50px; 
    -moz-transition: 
     width: 1s, 
     height: 1s 1s; 
} 

div:hover { 
    width:400px; 
    height:400px; 
} 

它的工作原理是當我想要懸停時;寬度首先是動畫，然後是延遲1秒後的高度。但是，當我將鼠標懸停在div上時，我希望它能夠執行相同的動畫，但是要顛倒過來;先是高度，然後是寬度。有沒有什麼辦法可以只用CSS來實現呢？

Answer 1

你可以只添加-moz-過渡到：懸停過於：

http://jsfiddle.net/nvn6p/1/

Answer 2

這對我的作品。並使其跨瀏覽器兼容。

基本上，我只是說相同的轉換到:hover，但是......這是重要 ...你需要扭轉的初始transition

div { 
    background:red; 
    width:100px; 
    height:50px; 
    -moz-transition-property: height, width; 
    -webkit-transition-property: height, width; 
    transition-property: height, width; 
    -moz-transition-duration: 1s, 1s; 
    -webkit-transition-duration: 1s, 1s; 
    transition-property-duration: 1s, 1s; 
    -moz-transition-delay: 0, 1s; 
    -webkit-transition-delay: 0, 1s; 
    transition-property-delay: 0, 1s; 
} 

div:hover { 
    width:400px; 
    height:400px; 
    -moz-transition-property: width, height; 
    -webkit-transition-property: width, height; 
    transition-property: width, height; 
    -moz-transition-duration: 1s, 1s; 
    -webkit-transition-duration: 1s, 1s; 
    transition-property-duration: 1s, 1s; 
    -moz-transition-delay: 0, 1s; 
    -webkit-transition-delay: 0, 1s; 
    transition-property-delay: 0, 1s;  
} 

例的height和width ：http://jsfiddle.net/qknMg/1/