10
以下HTML示例由两张图片组成;一个背景，另一个是对象。两者都使用缩放和旋转进行动画制作。在全高清显示器上，它往往是波涛汹涌。当您查看Firefox中的性能时，它可以获得大约20fps的速度。如何优化CSS动画（缩放，旋转，模糊）
首先我用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(http://www.pngmart.com/files/1/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>建议的重复问题，因为我没有看到这可怎么用帆布来解决是没有关系的。
如果不进行处理，''//无效的CSS评论... –
[CSS动画性能（HTTPS的可能重复：// stackoverflow.com/questions/32996102/css-animation-performance） – z3nth10n
@Ikillnukes我没有看到我的问题可以用canvas或js相关的东西解决，在那个问题中提到的答案。 – Milos