如何编写CSS关键帧以确定材料设计进度条

Question

我想制作一个不确定的进度条，就像在网页中的材料设计 (第二个进度条)在CSS3中一样。有人能分享必要的CSS魔法吗？我想要它的行为完全一样的视频，所以一个是加速，而另一个是减速，直到他们切换。

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

Answer 1

我在CodePen上找到了Stefano的一个好例子

// Android材料加载纯css动画。//作者: Stefano Ferrara http://androidpc.it/ //分叉自https://codepen.io/chofoo/pen/Abril //作者: Simon https://simonclavey.co.uk/ 体形{ background:#ffffff；边距:50 5px 300 5px；} .slider{位置:绝对；宽度:1000 5px；高度:5 5px；溢出-x:隐藏；} .line{位置:绝对；不透明度: 0.4；background:#4a8df8；宽度:150%；高度:5px；} .subline{位置:绝对；background:#4a8df8；高度:5px；} .inc{动画:增加2s无限；} .dec{动画:减少2s 0.5s无穷；}@关键帧从{左：-5%；宽度: 5%；}到{左: 130%；宽度: 100%;} @关键帧减少{从{左：-80%；宽度: 80%；}到{左: 110%；宽度: 10%;} }

许可证：

斯特凡诺(https://codepen.io/shalimano/pen/wBmNGJ) 2016年版权(c) 兹准许任何获得本软件副本和相关文件文件(“软件”)的人不受限制地处理软件，包括(但不限于)使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许被提供软件的人这样做，但须符合下列条件： 上述版权通知和本许可通知应包括在软件的所有副本或实质性部分。 软件按“原样”提供，没有任何明示或暗示的担保，包括但不限于适销性、特定用途的适用性和不侵权的担保。在任何情况下，作者或版权持有人均不得因与该软件有关的或与该软件有关的使用或其他交易而因或而引起的任何申索、损害或其他法律责任，不论是在合约诉讼、侵权或其他方面引起的。

Answer 2

超级简单CSS加载栏：

​

main {
  margin: 100px auto;
  /* Parent should have position set to relative for not disturbing the height when the loading bar is hidden */
  position: relative; 
  /* Parent width will be the width of the loading bar */
  width: 400px; 
}

.loading-bar-container {
  height: 2px;
  width: 100%;
  background-color: #cfe0f0;
  position: absolute;
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  width: 50%;
  background-color: #0000ff;
  position: absolute;
  left: -50%;
  animation: loading 2s ease-in 0.5s infinite;
}

@keyframes loading {
 0% {
  transform:translateX(0)
 }
 to {
  transform:translateX(400%)
 }
}

<main>
  <div class="loading-bar-container">
    <div class="loading-bar" />
  </div>
</main>

​

Answer 3

对于那些感兴趣的人来说，这就是上面所接受的答案的相同的CSS代码，但是使用的是CSS变换而不是左/宽。

​

body{
  background:#ffffff;
  margin:50px 300px;
}

.slider{
  position:absolute;
  width:1000px;
  height:5px;
  overflow-x: hidden;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#4a8df8;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#4a8df8;
  width:100%;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from {transform:translateX(-5%) scaleX(.05);}
   to {transform:translateX(130%) scaleX(1);}
}
@keyframes decrease {
   from {transform:translateX(-80%) scaleX(.8);}
   to {transform:translateX(110%) scaleX(.1);}
}

<div class="slider">
  <div class="line"></div>
  <div class="subline inc"></div>
  <div class="subline dec"></div>
</div>

​