不稳定的CSS动画

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

.timer容器{
背景：-webkit线性梯度（左，#677291 50%，#D8DAE5 50%）；
边界半径：100%；
高度：30px；
位置：相对位置；
顶部：5px；
左：9px；
宽度：30px；
-webkit动画：时间20s线性1；
动画：时间20s线性1；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
-webkit转换持续时间：1s；
过渡时间：1s；
-moz变换：translateZ（1）尺度（1.0,1.0）；
-ms变换：translateZ（1）尺度（1.0,1.0）；
-o变换：translateZ（1）标度（1.0,1.0）；
-webkit变换：translateZ（1）尺度（1.0,1.0）；
变换：translateZ（1）比例（1.0,1.0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.计时器{
边界半径：100%0100%/50%050%；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：50%；
-webkit动画：遮罩20s线性1；
-webkit转换来源：100%50%；
-webkit过渡计时功能：易用；
-webkit转换持续时间：1s；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
@-webkit关键帧时间{
100% {
-webkit变换：旋转（360度）；
}
}
@-webkit关键帧遮罩{
0% {
背景#D8DAE5；
-webkit变换：旋转（0度）；
}
50% {
背景#D8DAE5；
-webkit变换：旋转（-180度）；
}
50.01% {
背景：#677291；
-webkit变换：旋转（0度）；
}
100% {
背景：#677291；
-webkit变换：旋转（-180度）；
}
}
@关键帧时间{
100% {
变换：旋转（360度）；
}
}
@关键帧遮罩{
0% {
背景#D8DAE5；
变换：旋转（0度）；
}
50% {
背景#D8DAE5；
变换：旋转（-180度）；
}
50.01% {
背景：#677291；
变换：旋转（0度）；
}
100% {
背景：#677291；
变换：旋转（-180度）；
}
}

---

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

---

在JSFIDLE之外，它也可能运行得更平稳。

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

在JSFIDLE之外，它也可能运行得更平稳。

我看到了这篇文章：

它在动画表演方面提供了相当丰富的信息。但我很想看看是否还有其他人有其他见解。

我看到了这篇文章：

---

它在动画表演方面提供了相当丰富的信息。但我想看看是否还有其他人有其他见解。

首先，
干得好
其次，
看来我迟了4年才得到这个答案。但是，现在

就像上面的帖子建议的那样。。。我也未能重现动画中的抖动问题。（甚至增加了

.timer容器

选择器的height和width属性并仔细查看）它运行得非常平稳。您提供的代码片段似乎没有什么问题

但我将把这个答案留给那些想要快速修复常见CSS动画抖动的人，他们可能会经历这种抖动

设置

背面可见性：隐藏；

在元素上，您正在设置动画

设置动画时，仅更改

不透明度

和

变换

属性

浏览器针对设置这些属性的动画进行了优化，并将确保最小化任何性能开销

---

几乎任何你想要的动画都可以通过使用

变换来实现
干得好

其次，

看来我迟了4年才得到这个答案。但是，现在

就像上面的帖子建议的那样。。。我也未能重现动画中的抖动问题。（甚至增加了
.timer容器
选择器的height和width属性并仔细查看）它运行得非常平稳。您提供的代码片段似乎没有什么问题

但我将把这个答案留给那些想要快速修复常见CSS动画抖动的人，他们可能会经历这种抖动

设置

背面可见性：隐藏；

在元素上，您正在设置动画

设置动画时，仅更改
不透明度
和
变换
属性

浏览器针对设置这些属性的动画进行了优化，并将确保最小化任何性能开销

几乎任何你想要的动画都可以通过
变换
来实现。有趣的是，我的电脑上正在运行它，它非常不稳定。即使我在本地运行它，它也不稳定。我把它放在JSFIDLE上只是为了和stackoverflow共享。有趣的是，我的电脑上运行着它，它非常不稳定。即使我在本地运行它，它也不稳定。我只把它放在JSFIDLE上，以共享stackoverflow。