如何优化CSS动画(缩放,旋转,模糊)

Question

以下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解决这个问题.

Answer 1

看一下will-change属性,这可能会帮助你让它变得更平滑,你可以在这里阅读它

它没有唯一的浏览器支持.

我怀疑你在雨中的1px模糊可能是非常密集的,你正在模糊不断变化的东西.我不太清楚你在哪里使用.blur类和相关的动画,但这对性能来说是非常昂贵的.

transform: translate3d(0,0,0);正如罗伯特摩尔建议帮助webkit特别使用硬件加速,你可以在这里阅读它但是在这个实例中你正在使用过滤器这些已经利用了硬件加速

Answer 2

那是因为您正在实时模糊动画 GIF。

删除-webkit-filter: blur(1px);，滞后就消失了。

我尝试用画布元素重新创建雨效果，但得到了相同的结果，所以 GIF 不是这里的问题。

问题是 Firefox 似乎在与动画元素上的模糊过滤器作斗争。

（不是真正的答案，但评论太长了）