Css次々にトランジション

Question

私はCSS transitionsを次々と再生しようとしました。最初は幅と高さを変換する必要があります。
私はいくつかのオプションを試してみましたが、すべてが無駄です。javascriptでもこれを実現しましたが、CSSの専門家がこれを調べて分断することができます。

<style> 
div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; 
    transition: all 2s; 
} 

div:hover { 
    width: 300px; 
    height:500px; 
} 
</style> 

Answer 1

ちょうど1つのCSSルールで順番に複数の遷移を行うためにtransition速記でtransition-delayプロパティを使用します。

-webkit-transition: width 2s, height 2s ease 2s; 
transition: width 2s, height 2s ease 2s; 

Answer 2

次いで、ちょうどそれらを配列決定する遷移遅延を使用....参照を容易にするためにカンマ区切り値に個々の遷移プロパティを分割

。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    transition-property: width, height; 
 
    transition-duration:2s, 4s; 
 
    transition-delay:0s, 2s; 
 
    transition-timing-funtion:linear; 
 
} 
 

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

<div></div>

Answer 3

あなたはこのためKeyframesを使用することができます。

/* Standard */ 
@keyframes all { 
    0% {width: 100px; height: 100px;} 
    50% {width: 300px; height: 100px;} 
    100% {width: 300px; height: 500px;} 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes all { 
    0% {width: 100px; height: 100px;} 
    50% {width: 300px; height: 100px;} 
    100% {width: 300px; height: 500px;} 
} 

このようにそれを呼び出します。彼らは逆に使用することができますように私は、このより良い方法を使用する前に投稿他の回答：

div:hover { 
    -webkit-animation: all 2s; /* Chrome, Safari, Opera */ 
    animation: all 2s; 
    animation-fill-mode: forwards; 
} 

は、この例にJsFiddle

編集を参照してください。ユーザーがdivをロールオーバーするときのアニメーション。