如何将CSS关键帧写入不确定材质设计进度条

我想在网页中制作一个不确定的进度条，如CSS3中的（第二个）所示。谁能分享必要的CSS魔法？我希望它的行为与视频上的完全相同，因此一端在加速，而另一端在减速，直到它们切换

我找不到任何现有的这样的例子。

如果链接断开，代码如下：

正文{
背景：#ffffff；
利润率：50像素300像素；
}
.滑块{
位置：绝对位置；
宽度：1000px；
高度：5px；
溢出x：隐藏；
}
.线路{
位置：绝对位置；
不透明度：0.4；
背景：4a8df8；
宽度：150%；
高度：5px；
}
.子系{
位置：绝对位置；
背景：4a8df8；
高度：5px；
}
公司{
动画：增加2秒无限；
}
年月日{
动画：减少2s 0.5s无穷大；
}
@关键帧增加{
从{左：-5%；宽：5%；}
到{左：130%；宽：100%；}
}
@关键帧减少{
从{左：-80%；宽：80%；}
到{左：110%；宽：10%；}
}

---

对于那些感兴趣的人来说，这是它看起来与上面接受的答案相同的CSS代码，但使用的是左/宽而不是左/宽

正文{
背景：#ffffff；
利润率：50像素300像素；
}
.滑块{
位置：绝对位置；
宽度：1000px；
高度：5px；
溢出x：隐藏；
}
.线路{
位置：绝对位置；
不透明度：0.4；
背景：4a8df8；
宽度：150%；
高度：5px；
}
.子系{
位置：绝对位置；
背景：4a8df8；
宽度：100%；
高度：5px；
}
公司{
动画：增加2秒无限；
}
年月日{
动画：减少2s 0.5s无穷大；
}
@关键帧增加{
来自{transform:translateX（-5%）scaleX（.05）；}
到{转换：translateX（130%）scaleX（1）；}
}
@关键帧减少{
来自{transform:translateX（-80%）scaleX（.8）；}
到{transform:translateX（110%）scaleX（.1）；}
}

---

一个带有纯HTML和CSS的超简单的不确定加载程序

.progress line、.progress line:before{
高度：3倍；
宽度：100%；
保证金：0；
}
1.进度线{
背景色：#b3d4fc；
显示：-webkit flex；
显示器：flex；
}
.进度线：之前{
背景色：#3f51b5；
内容：''；
-webkit动画：运行进程2s立方贝塞尔（0.4,0,0.2,1）无限；
动画：运行进程2s三次贝塞尔（0.4,0,0.2,1）无限；
}
@-webkit关键帧运行进度{
0%{左边距：0px；右边距：100%；}
50%{左边距：25%；右边距：0%；}
100%{左边距：100%；右边距：0；}
}
@关键帧运行进度{
0%{左边距：0px；右边距：100%；}
50%{左边距：25%；右边距：0%；}
100%{左边距：100%；右边距：0；}
}

---

关于如何仅使用

变换实现相同的功能，您有什么想法吗？像平移和缩放？这样，如果主线程停止，动画就不会停止，因为当主线程忙于其他事情时，动画会冻结。好吧，用
translate
和
scale
尝试过，每当我执行任何繁重的任务时，动画仍然会冻结。有什么想法吗？我有一个带有
rotate
的简单刷新图标，它不会停止，这与我想用进度条做的事情是一样的。我的第一个想法是将繁重的任务移出主线程。您可以将负载转移到服务器（如果您的用例可能的话）或使用。我以前从未以这种方式使用过转换，也不确定它是否可行。我所看到的一切仍然使用带有变换关键帧的CSS动画。我必须说，与公认的答案相比，我更喜欢它的简单性。如果你可以使用
transform
，你应该更喜欢它而不是其他属性的动画。当属性如
margin
、
left
或
top
在CPU上设置动画时，使用
transform
的动画或转换在GPU上运行。尤其是在较旧的设备上，这会产生很大的不同。进度条的第一阶段显示在中间。