新手上路,如何在CSS3动画结束后. 手动倒放动画?跪求！

Question

需要实现效果:有两个状态A,B,点击后A->B,再次点击B->A;例子:点击元素有元素变大,再次点击元素变小,但是我写的只有在第一次点击的时候有效果JSFiddle:https://jsfiddle.net/sylvaner...

Answer 1

用transition；
transition:width0.5s,height0.5s;
css
.icon{
width:50px;
height:50px;
background:blue;
overflow:hidden;
line-height:50px;
font-size:20px;
text-align:center;
border-radius:50%;
transition:width0.5s,height0.5s;
}
.act
{
width:300px;
height:300px;
}
js
letflag=true;
$('.icon').click(function(){
if(flag){
$('.icon').addClass('act');
}else{
$('.icon').removeClass('act');
}
flag=!flag;
})
                            

Answer 2

如果是简单的动画效果，可以用transition，设定需要动画的属性，然后用一个class来设定动画的终止状态，然后点击事件来增加或移除class来实现动画
例：
HTML
target