Comment ajouter une classe avec css3 Animation?

Question

Je ne peux pas créer une belle finition pour mon animation css3. Comme aller boîte-ombre à l'opacité 0. Si je viens d'ajouter la classe avec une animation de pause, ce ne sera pas agréable, comme blik stop.

Javascript

$(this).addClass('paused').delay(200).addClass('a-finish'); 

CSS

.paused {   
    -webkit-animation-play-state:paused;   
    -moz-animation-play-state:paused;   
    animation-play-state:paused;   
} 

.a-finish { 
    -webkit-animation: 5s linear 0s normal none 1 wrap-done;    
} 

@-webkit-keyframes wrap-done {   
    0% { box-shadow: 0 9px 4px rgba(255, 255, 255, 1) inset;} 
    100% { box-shadow: 0 9px 4px rgba(255, 255, 255, 0) inset;}   
} 

donc j'ai juste besoin un peu comme fondu facilité l'animation par une autre animation CSS3.

Comment je peux le faire avec css3 et JQ?

Answer 1

J'ai trouvé une solution. Ce que je créé:

Javascript

$('.class').addClass('blink');      <-Start some animation. 
$('.class').on('webkitTransitionEnd', function() { <-When animation end. 
    $(.class).addClass('paused');     <-Stop animation. 
    $(.class).addClass('a-finish');     <-Start finish animation. 
} 

Css

.blink { 
    ...some blik animation 
} 

.paused {   
-webkit-animation-play-state:paused;   
-moz-animation-play-state:paused;   
animation-play-state:paused;   
} 

.a-finish { 
    -webkit-animation: 5s linear 0s normal none 1 wrap-done;    
} 

@-webkit-keyframes wrap-done {   
    0% { box-shadow: 0 9px 4px rgba(255, 255, 255, 1) inset;} 
    100% { box-shadow: 0 9px 4px rgba(255, 255, 255, 0) inset;}   
} 

Et ce travail est pas !! Par conséquent, si l'animation est mise en pause par animation-play-state:paused;, nous ne pouvons pas en ajouter de nouveaux.

Donc, j'utilise simplement removeClass avec une animation précédente et commence à nouveau pour finir.