摇晃的 CSS 动画答案

【问题标题】：Shaky CSS Animation摇晃的 CSS 动画
【发布时间】：2021-01-18 23:23:44
【问题描述】：

我只使用 HTML/CSS 制作了一个饼图计时器动画。你可以在这里看到它：

.timer-container {
  background: -webkit-linear-gradient(left, #677291 50%, #D8DAE5 50%);
  border-radius: 100%;
  height: 30px;
  position: relative;
  top: 5px;
  left: 9px;
  width: 30px;
  -webkit-animation: time 20s linear 1;
  animation: time 20s linear 1;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -moz-transform: translateZ(1) scale(1.0, 1.0);
  -ms-transform: translateZ(1) scale(1.0, 1.0);
  -o-transform: translateZ(1) scale(1.0, 1.0);
  -webkit-transform: translateZ(1) scale(1.0, 1.0);
  transform: translateZ(1) scale(1.0, 1.0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.timer {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  -webkit-animation: mask 20s linear 1;
  -webkit-transform-origin: 100% 50%;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@-webkit-keyframes time {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes mask {
  0% {
    background: #D8DAE5;
    -webkit-transform: rotate(0deg);
  }
  50% {
    background: #D8DAE5;
    -webkit-transform: rotate(-180deg);
  }
  50.01% {
    background: #677291;
    -webkit-transform: rotate(0deg);
  }
  100% {
    background: #677291;
    -webkit-transform: rotate(-180deg);
  }
}
@keyframes time {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mask {
  0% {
    background: #D8DAE5;
    transform: rotate(0deg);
  }
  50% {
    background: #D8DAE5;
    transform: rotate(-180deg);
  }
  50.01% {
    background: #677291;
    transform: rotate(0deg);
  }
  100% {
    background: #677291;
    transform: rotate(-180deg);
  }
}

<div class='timer-container'>
  <div class='timer'></div>
</div>

它有效，但有点不稳定。任何平滑动画的技巧都会很棒。

谢谢！

【问题讨论】：

标签： css animation

【解决方案1】：

它在我的 MacBook Pro 上的 Safari、Chrome 和 Firefox 中运行非常流畅，但 CSS 动画受设备和浏览器之间性能差异的影响。您可能只是看到了您设备的局限性。

它也可能在 jsfiddle 之外运行得更顺畅。

【讨论】：

有趣...我在我的电脑上运行它，它非常不稳定。即使我在本地运行它也很不稳定。我只把它放在jsfiddle上分享给stackoverflow。

【解决方案2】：

我看到了这个帖子： Improving CSS3 transition performance

关于动画性能的信息非常丰富。但我很想看看其他人是否有其他见解。

【讨论】：

【解决方案3】：

首先，
干得好...
其次，
这个答案似乎我迟到了 4 年。但是，这里...

就像上面帖子中建议的@dave...我也未能重现您在动画中遇到的抖动问题。（甚至增加.timer-container 选择器的高度和宽度属性并仔细查看）它运行得非常顺利。而且您提供的代码 sn-p 似乎没有任何问题。

但我会将这个答案留给那些想要快速修复他们可能遇到的常见 CSS 动画抖动的人。

设置

backface-visibility: hidden;

在元素上，您正在制作动画。

并且仅在动画时更改 opacity 和 transform 属性。

浏览器针对这些属性的动画进行了优化，并确保您将任何性能开销降至最低。

使用transforms 几乎可以实现您想要的任何动画。

【讨论】：