Stosowanie właściwości CSS po zakończeniu przejścia

Question

W jaki sposób mam właściwości oświadczenia, które mają zastosowanie do elementu po zakończeniu przejścia CSS3 po? Mam coś takiego:

.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; 
} 

chciałbym właściwości wypełniające i marginesów w: Deklaracja najechania być stosowane po przejście odbywa się w 300ms.

Answer 1

Można to osiągnąć poprzez umieszczenie innego elementu wewnątrz lub na zewnątrz .something i stosowania dopełnienia i marginesów przejścia do nowego elementu, ale z transition-delay wartości ustawionej w czasie równym lub większym niż chwili początkowej box-shadow transformacji.

Tak więc, na przykład:

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

i 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; 
} 

ten wykona przejście box-shadow w 300ms, a potem margin i padding w 400ms (można ustawić czas przejścia do 0, jeśli to efekt, którego szukasz).

Można spróbować go na jsFiddle: http://jsfiddle.net/gTVVk/2/

EDIT:Duncan Beattie's answer wystarczyć, chyba że trzeba wykonać różne przejścia na tej samej nieruchomości. W przeciwnym razie nie ma sensu komplikować rzeczy za pomocą zagnieżdżonych elementów div.

Answer 2

można dodać opóźnienie tak:

transition: box-shadow 300ms; 

transition: padding 300ms 400ms; 

pierwszy rozpocznie się unoszą i ostatnie 300ms, drugi rozpocznie się po 400ms i znowu ostatnie 300ms.

DEMO

Article on CSS-Tricks