css动画缩放的,如何优化CSS动画（缩放，旋转，模糊）

以下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);

}

}

建议的重复问题，因为我没有看到这可怎么用帆布来解决是没有关系的。

2017-08-25

Milos

+2

如果不进行处理，''//无效的CSS评论... –

+0

[CSS动画性能(HTTPS的可能重复：// stackoverflow.com/questions/32996102/css-animation-performance) –

+0

@Ikillnukes我没有看到我的问题可以用canvas或js相关的东西解决，在那个问题中提到的答案。 –