遷移が終了したときにCSSプロパティを適用する

Question

の場合、宣言のプロパティをの後にどのようにしてCSS3の遷移が終了するのですか？遷移が300ミリ秒に行われた後に適用するホバー宣言：私はパディングとマージンの性質を希望

.something { 
    background: blue; 
    padding: 10px 0px; 
    background-clip: content-box; 
    transition: box-shadow 300ms; 
} 
.something:hover { 
    box-shadow: 0px 0px 3px blue; 
    padding: 0px; 
    margin: 10px 0px; 
} 

：私のようなものを持っています。

Answer 1

.somethingの内側または外側に別の要素を配置し、新しい要素にパディングと余白のトランジションを適用し、transition-delayの値を最初のbox-shadowトランジションの時間以上の時間に設定すると、これを実現できます。

ので、例えば：

<div class="immediate"> 
    <div class="later"> 
     I can haz transitions. 
    </div> 
</div> 

とCSS：

.immediate { 
    background: #eeb; 
    transition: box-shadow 300ms; 
} 

.immediate:hover { 
    box-shadow: 0 0 3px black; 
} 

.later { 
    margin: 0; 
    padding: 10px 0; 
    transition: all 400ms; 
    transition-delay: 300ms; 
} 

.later:hover { 
    margin: 10px 0; 
    padding: 0; 
} 

これは300msの中box-shadow移行を行い、その後marginと400msの中paddingます（あなたがするこの遷移時間を設定することができますそれがあなたが探している効果なら0です）。

あなたはjsFiddleでそれを試すことができます。http://jsfiddle.net/gTVVk/2/

EDIT：あなたは同じ性質上異なるトランジションを実行する必要がある場合を除きDuncan Beattie's answerが、うまく行います。そうしないと、ネストされたdivと過度に複雑になることはありません。

Answer 2

あなたは、このような遅延を追加することができます。

transition: box-shadow 300ms; 

transition: padding 300ms 400ms; 

ホバーと最後の300ミリ秒に開始します第一、第二は、400msのと再び最後の300ミリ秒後に開始されます。

DEMO

Article on CSS-Tricks