在我们制作box-shadow属性的动画的时候，每一帧动画都会引起浏览器的重绘操作，严重影响页面的性能。我们有什么办法可以解决动画box-shadow属性时页面的性能问题呢？答案是：没有！但是我们可以使用其它方法来模拟box-shadow动画：通过动画伪元素的opacity属性来达到动画元素阴影的效果。通过这种方法只需要进行少量的重绘，就可以达到和动画box-shadow属性一样的效果。
使用box-shadow属性来制作元素的阴影动画效果。
动画box-shadow属性
使用鼠标滑过卡片看看效果
使用动画来改变box-shadow (在这个例子中从 box-shadow: 0 1px 2px rgba(0,0,0,0.15) 到 box-shadow: 0 5px 15px rgba(0,0,0,0.3)的过程中会一起每一帧都进行重绘操作。
也许在你的桌面电脑浏览器中不会看出有什么问题，但是在移动手机上就有可能会出现问题。也许在更为复杂的布局中，你的桌面电脑浏览器也会出现问题。
使用伪元素来制作元素的阴影动画效果。
使用伪元素动画进行模拟
使用鼠标滑过卡片看看效果
我们可以通过插入一个:after来减少重绘的数量，同时为它添加一个阴影，然后在鼠标滑过时动画伪元素的opacity属性。
transform和opacity属性的修改都是被硬件加速的，所以我们可以达到更好的性能效果。
在执行上面的两个例子的时候，打开你的浏览器开发人员工具，你可以看到类似下面的结果：
最低0.47元/天 解锁文章
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
