Question

我无法为我的css3动画创造出漂亮的效果。就像去盒子阴影到不透明度0.如果我只是添加带有暂停动画的类，那就不好了，就像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;}        
}

所以我只需要通过另一个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和之前的动画并开始新的完成。

如何使用css3动画添加类？

1 个答案: