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/