下面的 HTML 示例由两张图片组成;一个是背景,另一个是对象。两者都使用缩放和旋转进行动画处理。在全高清显示器上,它往往是不稳定的。当您查看 Firefox 中的性能时,它会达到大约 20 fps。
首先我使用了 jQuery;为了提高性能我选择了 CSS,但它仍然不完美。为了重现问题,请转到全屏。我怎样才能让它变得更好?
.html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #121212;
}
.maincontainer {
width: 100%;
padding-bottom: 100%;
position: fixed;
overflow: hidden;
}
.bg {
background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.bg2 {
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.rain {
background-image: url(https://media.giphy.com/media/OvFQrZk8b5N0Q/source.gif);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -1;
-webkit-filter: blur(1px);
}
.animate-bg {
-webkit-animation-name: animateBg;
animation-name: animateBg;
}
.animate {
-webkit-animation-duration: 35000;
animation-duration: 35000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-iteration-count: infinite;
}
/* Zoom in Keyframes */
@-webkit-keyframes animateBg {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes animateBg {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/*End of Zoom in Keyframes */
.eagle {
background-image: url(https://pngriver.com/wp-content/uploads/2018/04/Download-Flying-Eagle-PNG-Image.png);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: 900;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.animate-eagle {
-webkit-animation-duration: 35000;
animation-duration: 35000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-iteration-count: infinite;
-webkit-animation-name: animateeagle;
animation-name: animateeagle;
}
/* Zoom in Keyframes */
@-webkit-keyframes animateeagle {
0% {
transform: scale(0.8) rotate(0deg);
}
30% {
transform: scale(1.05) rotate(-2deg);
}
50% {
transform: scale(1.1) rotate(0deg);
}
80% {
transform: scale(1.05) rotate(2deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes animateeagle {
0% {
transform: scale(1) rotate(0deg);
}
30% {
transform: scale(1.05) rotate(-2deg);
}
50% {
transform: scale(1.1) rotate(0deg);
}
80% {
transform: scale(1.05) rotate(2deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/*End of Zoom in Keyframes */
.blur {
animation: blur 5000ms;
}
@keyframes blur {
0% {
-webkit-filter: blur(0px);
}
20% {
-webkit-filter: blur(3px);
}
40% {
-webkit-filter: blur(5px);
}
60% {
-webkit-filter: blur(7px);
}
80% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
}
20% {
-webkit-filter: blur(3px);
}
40% {
-webkit-filter: blur(5px);
}
60% {
-webkit-filter: blur(7px);
}
80% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
.unblur {
animation: unblur 1000ms;
}
@keyframes unblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
@-webkit-keyframes unblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
<div class="maincontainer">
<div id="bg2" class="bg2">
<div id="bg" class="bg animate animate-bg">
<div class="rain"></div>
<div class="drops"></div>
</div>
</div>
<div id="eagle">
<div class="eagle animate-eagle">
</div>
</div>
</div>
建议的重复问题不相关,因为我不知道如何用 Canvas 解决这个问题。
最佳答案
看看 will-change 属性,这可能会帮助你让它更平滑一些,你可以阅读它 here
它没有最好的浏览器支持,这是唯一的事情。
我怀疑你在雨中的 1px 模糊可能非常强烈,你正在模糊不断变化的东西。我不太明白您在哪里使用 .blur 类和相关动画,但这对性能来说会非常昂贵。
transform: translate3d(0,0,0);
Robert Moore 建议帮助 webkit 特别是使用硬件加速,你可以阅读它 here但是在这种情况下,当您使用过滤器时,它们已经在利用硬件加速
关于html - 如何优化 CSS 动画(缩放、旋转、模糊),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45886508/