如何实现平滑的“盒影”动画效果

这里有一个简单的方法来实现上述问题。如果要实现最小重绘，应该创建一个虚拟元素，并对其不透明度元素进行动画处理，这样它就可以模拟与每秒60帧动画的移动对象相同的效果。

例子

仔细观察这个例子，比较我们在其中使用的不同技巧。你说这两种效果看起来一样吗？唯一的区别是我们如何应用阴影和动画。在左边的例子中，当我们悬停鼠标时，我们将动画效果应用到框阴影中。在右边的例子中，我们添加了一个带有::after的虚拟元素，在其上设置了一个阴影，并为元素的不透明度元素制作了动画。

如果用开发工具尝试其中一个，应该会看到这样的东西(绿色条表示已经画出来了，越少越好):

当你比较悬停在左边的卡片(在方框阴影上应用动画)和悬停在右边的卡片(在其伪元素的不透明度上应用动画)时，你会明显地发现有更多的重绘。

为什么我们会看到这种效果？有几个CSS属性，即不透明度和变换，在执行动画时不会触发连续重绘每一帧。我们最好坚持在动画中只改变这两个属性，以尽量减少重绘(你的浏览器必须做的工作)。

放弃其他布局样式，这是两种技术的主要区别:

/*缓慢的方式*/

。慢慢来{

box-shadow: 0 1px 2px rgba(0，0，0，0.15)；

过渡:框阴影0.3s渐出:

}

/*悬停鼠标实现较大阴影的过渡*/

。慢慢来:悬停{

box-shadow:0 5px 15px rgba(0，0，0，0.3)；

}

/*捷径*/

。快速制作{

box-shadow: 0 1px 2px rgba(0，0，0，0.15)；

}

/*设置更大的阴影并隐藏它*/

。快速完成::之后{

box-shadow:0 5px 15px rgba(0，0，0，0.3)；

不透明度:0；

转场:不透明度0.3s渐出:

}

/*实现鼠标悬停时较大阴影的过渡显示*/

。快速制作:hover::after {

不透明度:1；

}