如何提高这个 CSS 动画的性能？答案

【问题标题】：How to improve the performance of this CSS animation?如何提高这个 CSS 动画的性能？
【发布时间】：2015-07-14 23:48:14
【问题描述】：

我正在使用 Chrome 和纯 pulse CSS 动画

.pulse {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: #53A653;
  border-radius: 100%;  
  -webkit-animation: scaleout 3.0s infinite ease-in-out;
  animation: scaleout 3.0s infinite ease-in-out;
}



@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

这里是jsfiddle。

我注意到它很慢。一旦我运行它，Chrome 的其他窗口的滚动变得不流畅，即使现在我的打字也有点块。

CSS 动画真的这么慢吗？还是我的 CSS 很糟糕？如何提高其性能？

【问题讨论】：

这个动画是最好的，IMO。你确定是这个问题造成的吗？
不确定确切的问题。只需确保您在浏览器中启用了硬件加速：stackoverflow.com/questions/26356769/…
@kalpeshpatel 是的，硬件加速已启用，根据您提供的帖子。#
@jbutler483 是的，我很确定。如果我在我的问题中打开那个 jsfiddle，Chrome 会变得很慢，真的很慢。
它在我的工作正常...愚蠢的建议：您是否尝试关闭 chrome（也是后台运行进度）并重新打开它？如果它不能解决这个问题，尝试硬删除缓存也许？这很难，因为我说它对我的效果很好..

标签： css html css-animations

【解决方案1】：

尝试将动画持续时间更改为 1 秒：

.pulse {width: 20px; height: 20px; vertical-align: middle;background-color: #53A653; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out;}

编辑：我忘了读这行说你的滚动是如何变得粗大的。尝试使用 Firefox（愚蠢的建议）。如果不是，则很可能只是您的计算机。

【讨论】：

你的动画在我这边运行得非常顺利。顺便说一句，动画不错。