我想问一下，这段CSS代码有什么问题吗？它用于动画背景图像 - 缩放效果。
@media (min-width: 1000px) {
.anim-on {
background-size: 110% 110%;
background-position: center center;
animation: shrink 12s infinite alternate;
}
.anim-out {
background-size: 120% 120%;
background-position: center center;
animation: small 6s infinite alternate;
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
@keyframes small {
0% {
background-size: 100% 100%;
}
100% {
background-size: 110% 110%;
}
}
}
这段代码产生了很好的效果，但我看到，在较慢的机器上，效果很差。
怎么了？或者也许有人有更好的想法，如何用更好的技术创造这种效果？
背景大小是一个视觉属性，因此对其值的任何更改都会导致重新绘制。喷漆是一项非常昂贵的操作，并且必然会对低端机器的性能产生影响。解决这个问题的一种方法是使用 CSStransform（精确的比例）而不是background-size更改以产生动画。
会导致性能影响的片段：
下面的代码片段使用与问题中相同的动画。当您运行此代码片段并使用 Chrome 开发工具检查它时（通过启用“显示绘制矩形”选项），您会看到两个图像都有一个与之关联的绘制矩形（绿色或红色框），并且动画是发生这种情况时，该框会持续闪烁（或保持原样）。这表明重新绘制经常发生，因此会影响性能。
.anim-on,
.anim-out {
height: 200px;
width: 200px;
background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on {
background-size: 110% 110%;
background-position: center center;
animation: shrink 12s infinite alternate;
}
.anim-out {
background-size: 120% 120%;
background-position: center center;
animation: small 6s infinite alternate;
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
@keyframes small {
0% {
background-size: 100% 100%;
}
100% {
background-size: 110% 110%;
}
}
/* Just for demo */
div {
float: left;
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>
对性能影响较小的片段：
在下面的代码片段中，我添加了background-image到一个伪元素，然后使用scale对其进行变换以产生放大/缩小效果。家长overflow: hidden设置可防止动画影响其大小。如果您使用 Chrome 开发工具检查这一点，您会发现绿色或红色框仅在页面加载后出现一次并消失。这表明动画本身期间没有发生进一步的重绘，因此从性能的角度来看它更好。您还会注意到，该动画比之前的动画更加流畅。
.anim-on,
.anim-out {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.anim-on:after,
.anim-out:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on:after {
animation: shrink 12s infinite alternate;
}
.anim-out:after {
animation: small 6s infinite alternate;
}
@keyframes shrink {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
/* Just for demo */
div {
float: left;
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>
您可以在以下位置找到有关各种 CSS 属性以及更改其值将如何影响渲染过程的更多信息：CSS 触发器网站 http://csstriggers.com/.
您可以找到有关渲染过程以及如何使用的更多信息transform（与少数其他属性相反）导致以下文章/站点的性能改进：
- HTML5 Rocks - Chrome 中的加速渲染 http://www.html5rocks.com/en/tutorials/speed/layers/
-
Chrome 中的 GPU 加速合成 https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome.
-
Google 开发者 - 渲染性能 https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
