何box-shadow在CSS中为属性设置动画，而又不引起每一帧的重新绘制，并严重影响页面的性能？简短的答案：你不知道。对变化进行动画处理box-shadow 会损害性能。
有一种简单的方法来模仿相同的效果，但是，只需最少的重绘，就可以使动画以稳定的60 FPS运行：opacity为伪元素设置动画。
演示
看一下演示并比较我们将探索的两种不同技术。如果两个示例对您来说都一样，那就是关键。唯一的区别是我们如何应用阴影和设置阴影动画。在左边我们动画box-shadow上hover，并在右侧我们还加入了一个伪元素用:after，适用影子说，和动画的opacity该元素的。
如果您调出开发人员工具并将鼠标悬停在这些项目之一上，则应该看到类似的内容（绿色的条形是油漆；越少越好）：
box-shadow与将卡悬浮在右侧（opacity为其伪元素的动画）相比，将卡悬浮在左侧（为动画）时，显然会有更多的重绘。
为什么会看到这种效果？在不不断为每一帧触发重绘的情况下，只有很少的CSS属性可以动画，即opacity和transform。通过坚持在动画过程中仅更改这两个属性，我们将重新绘制的数量（以及浏览器必须完成的工作）减到最少。
这是两种技术之间的关键区别，它们会去除所有其他布局样式：
/* The slow way */
.make-it-slow {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out;
}
/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* The fast way */
.make-it-fast {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Pre-render the bigger shadow, but hide it */
.make-it-fast::after {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover::after {
opacity: 1;
}
在性能更好的示例中，我们有两层：一层用于盒子，一层用于阴影，并且仅对opacity阴影层的属性进行动画处理。
分解
有了基本的知识，让我们看一下如何创建演示中展示的3D卡效果。第一步是将阴影移到伪元素，就像我们上面所做的那样。我们还添加所有布局代码来创建卡：
/* All HTML you need is <div class="box"></div> */
/* Create a simple white box, and add the shadow for the initial state */
.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}
/* Create the hidden pseudo-element */
/* include the shadow for the end state */
.box::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
请注意，由于我们要为这两个元素设置动画，因此我们要transition同时为.box和添加一个.box::after：transformfor .box和opacityfor .box::after。
这些样式给我们一个含蓄的白色盒子box-shadow。此时，来自的较强阴影.box::after已完全隐藏，您无法与该框进行交互：
要创建与演示中相同的效果，现在我们需要做的就是放大.box悬停鼠标，并淡入伪元素及其阴影：
/* Scale up the box */
.box:hover {
transform: scale(1.2, 1.2);
}
/* Fade in the pseudo-element with the bigger shadow */
.box:hover::after {
opacity: 1;
}
而已！将鼠标悬停在框上可以预览效果：
总而言之，这是所有CSS，带有所有供应商前缀，以及一些针对其他custom的自定义缓动：
.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.box:hover::after {
opacity: 1;
}
当然，要实现与简单的动画效果相同的效果，需要大量的CSS box-shadow，只是要提高性能。何必呢？
即使您的桌面可能box-shadow没有任何问题地处理动画，您的手机也可能没有问题，甚至在为更复杂的布局制作动画时，您的桌面也可能开始停顿。
只要将过渡和动画设置为transform和opacity，就可以确保获得最佳性能，并因此获得最佳的用户体验。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261709.html