如何使用css3动画添加类？

Question

我无法为我的css3动画创建完美的完成。就像去阴影到不透明0.如果我只是添加暂停动画类，它会不好，像blik停止。

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

，所以我只是用另一CSS3动画需要一些像简单的淡出动画。

如何我可以用CSS3和JQ做到这一点？

Answer 1

我找到了解决方案。我创建：

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

，这是不行的！

所以，如果动画是由animation-play-state:paused;暂停，我们不能增加新的。所以我只用removeClass与以前的动画并开始新的完成。