在Web上，大多数按钮可能都是平庸的。有时，为了强调特殊品牌或满足特殊功能，可能需要在按钮上添加一点点击动画。比如用过AntDesign的朋友应该能发现，在点击按钮的时候，会出现很细微的水波动画，很有特色。看到这样的按钮自然会联系AntDesign。动画过程其实并不复杂。看了官方的实现，是通过js动态改变属性实现的。单击时，更改属性以触发动画。动画结束后恢复属性（恢复是保证Clicking还有动画），如下好像有点麻烦？其实这个效果也可以用纯CSS来实现，还可以实现其他更有趣的效果。一起来看看吧~1.CSS过渡动画CSS中通常有两种实现动画的方式，transition和animation。一般来说，简单的需要主动触发的（:hover、:active或者动态切换类名等）可以用transition实现，其他的可以用animation实现。回到这个例子，动画很简单，只有两个变化，需要主动触发（这里是点击，可以想成：active），所以优先使用transition来实现。观察整个动画，其实就是两种效果叠加，阴影不断放大，透明度不断降低。然后，这个动画（过渡）的两个状态可以这样表达/*initialstate*/button{opacity:.4;transition:.3s;}/*扩散状态*/button{box-shadow:0006pxvar(--primary-color);opacity:0;}好了，两种状态的样式都写好了，如何触发点击呢？2.CSS点击动画首先完善基础样式，假设HTML结构如下Default简单美化：root{--primary-color:royalblue;}.button{padding:5px16pxborder:1pxsolid#d9d9d9;背景颜色：透明；边界半径：2px；行高：1.4；框阴影：02px#00000004；游标：指针；.button:hover{颜色：var(--primary-color);border-color:currentColor;}然后添加阴影扩散动画，为了方便控制??透明度，这里使用::after伪类单独渲染。button::after{content:'';位置：绝对；插图：0；边界半径：继承；不透明度：0.4；transition:.3s;}如果transition动画是通过:active正常触发的，可以这样实现。button:active::after{box-shadow:0006pxvar(--primary-color);opacity:0;}效果如下：咦，好像哪里不对？然后往下看三。为什么CSStransitionreset会出现上述现象呢？这里提到：活跃。:active仅在按下鼠标时有效。通常，单击按钮时，是轻按而不是长按。如果给:active加上动画，那么当鼠标抬起时，动画一般都不会结束，所以当鼠标抬起时，动画会立即停止。如果是转场，会有“回”的转场效果。那么，有没有什么办法可以只在鼠标松开的时候做动画呢？我的实现是这样的，假设默认是shadow的状态（透明度为0），在:active的时候快速移除shadow（这里的“快速”是指取消按下的过渡动画），然后因为默认是Transitional，所以当鼠标抬起的时候，阴影会回到shadowed状态，这样可以保证按下的时候没有动画，整个触发过渡动画的过程其实是这样的：取消转场动画也很简单，设置duration为0即可，代码实现是这样的。button::after{/*otherstyles*/opacity:0;框阴影：0006pxvar（--原色）；transition:.3s;}/*点击*/.button:active::after{box-shadow:none;不透明度：0.4；过渡：0s；/*取消过渡*/}然后，神奇的效果就出来了！这样就实现了和AntDesign几乎一样的点击效果。4.其他动画案例上面其实提供了一种思路，只要是这种点击动画，都可以通过这种方式实现。比如这样一个刷新按钮，当你需要点击它的时候，很容易就可以转动它。这个例子比上面那个简单。毕竟只有旋转变化，没有透明度变化。核心代码如下。icon{transform:rotate(360deg);转换：.5s;}.button:active.icon{transform:rotate(0);transition:0s;}完整的代码可以在antdesignbutton(codepen.io)获取，里面集成了更多的demo比如这样的点击粒子动画原理是一样的。在上一篇文章CSS实现粒子动画按钮中已经提到，这里不再多说。完整的代码可以在button-active(codepen.io)找到5.对于比较复杂的动画，前面说了简单的动画可以用transitions来实现，但是对于稍微复杂一点的动画，比如下面这个“Q弹Q弹”"按钮动画，简单的transition无能为力，必须用动画，原理类似于先定义一个动画关键帧@keyframestada{from{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(.9,.9,.9)rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{变换：scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg)}到{transform:scale3d(1,1,1)}}这个动画来自tada在Animate.css中，复制过来让按钮动起来就可以了。button{animation:tada1s;}点击的时候重置动画，直接重置动画，动画可能比较好理解，所以当你抬起来的时候将重新运行动画。button:active{animation:none;}这样就实现了，是不是出奇的简单呢？但是，有一个小缺陷。每次刷新页面，按钮都会自动执行一次动画（因为动画是自动执行的），如下。那么，如何避免第一次进来动画不执行呢？这里有个小技巧，可以把动画时长默认设置为0，这样第一个动画执行完后，马上结束，然后在悬停的时候恢复默认的动画时长，既然动画已经结束了，改变动画duration不会触发动画再次运行，所以实现是.button{animation:jump0s;}.button:hover{animation-duration:1s;}.button:active{animation:none;}这样就会有页面刷新时没有动画接下来，借助animate.css，你可以替换任何动画。比如完整代码可以访问button-jump（codepen.io），里面集成了更多的demo。这个案例，其实就是默认执行动画，点击的时候重新设置。总体来说，代码很简单，但是理解起来可能不是特别顺畅。总结一下实现要点：简单动画使用transition，其他动画transition可以通过设置duration为0来重置动画，设置none为resetwhen:active可以重置动画，动画就会运行单击后再次。复杂的动画可以使用已有的动画库，比如anmate.css，将动画时长设置为0，避免第一次渲染。与js实现相比，CSS实现代码更少，加载速度更快，无需等待js加载完成，体验更好（比如自然支持按空格键触发），也更易于维护和使用，直接复制一个类名就可以了。最后，如果觉得对你有帮助，请点赞、收藏、转发???
