css - 使用 CSS3 动画创建类似 Google 的事件/进度条

Question

我从 Google 风格指南中找到了此视频

http://material-design.storage.googleapis.com/videos/components-progressandactivity-progressandactivity-_20spec.linear_large_xhdpi.mp4

在此页面

http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators

我喜欢显示进度的方式。有谁知道是否有 CSS3 的实现？我自己尝试过，但这是迄今为止我对第二个进度条最接近的结果:

http://plnkr.co/edit/v4jcJlpusKqEK3AySOBZ?p=preview

<div class="spinner">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
</div>

这是作为 SCSS 的 CSS:

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin animation($animation) {
  -webkit-animation: #{$animation};
    -moz-animation: #{$animation};
    -ms-animation: #{$animation};
    animation: #{$animation};
}

$spinner-height: 7px;
$green: #8bc34a;
.spinner {
  position: relative;
  width: 100%;
  height: $spinner-height;
  opacity: 1;
  background-color: lighten($green, 25%);
  overflow: hidden;
  .bar {
    height: $spinner-height;
    background-color: $green;
    position: absolute;
  }
  .bar1 {
    left: 50%;
    width: 10%;
    @include animation(bar1 7s infinite linear);
  }
  .bar2 {
    left: 0%;
    width: 0%;
    @include animation(bar2 7s infinite);
  }
}

@include keyframes(bar1) {
    0% { width: 0%; left: 0%; }
  10% { width: 30%; left: 100%; }
  19.99% { width: 30%; left: 100%; }
  20% { width: 0%; left: 0%; }
  30% { width: 80%; left: 100%; }
  30.01% { width: 0%; left: 0%; }
  40% { width: 5%; left: 30%; }
  50% { width: 50%; left: 100%; }
  50.01% { width: 0%; left: 0%; }
  60% { width: 60%; left: 20%; }
  70% { width: 5%; left: 100%; }
  70.01% { width: 0%; left: 0%; }
  80% { width: 50%; left: 30%; }
  90% { width: 10%; left: 80%; }
  100% { width: 20%; left: 100%; }
}

@include keyframes(bar2) {
    0% { width: 0%; left: 0%; }
  10% { width: 60%; }
  19.99% { width: 40%; left: 100%; }
  20% { width: 0%; left: 0%; }
  25% { width: 10%; left: 10%; }
  30% { width: 40%; left: 30%; }
  40% { width: 60%; left: 100%; }
  40.01% { width: 0%; left: 0%; }
  50% { width: 10%; left: 40%; }
  60% { width: 30%; left: 100%; }
  60.01% { width: 0%; left: 0%; }
  70% { width: 10%; left: 40%; }
  80% { width: 5%; left: 100%; }
  80.01% { width: 0%; left: 0%; }
  90% { width: 70%; left: 10%; }
  100% { width: 10%; left: 100%; }
}

也许有人可以帮助我更接近这个动画。

Answer 1

对于一个 div 类 .loading，这是第二个的可能答案(您需要为动画/过渡添加前缀)

.loading{
    width:90%;
    margin:0 auto;
    height:8px;
    background-color:lightblue;
    position:relative;
    transition: all 300ms ease-in-out;
}

.loading:hover{
    height:20px;
}

.loading:before, .loading:after{
    content:"";
    display:block;
    height:100%;
    position:absolute;
    background-color:blue;
    animation:motion 2s infinite ease;
    border-radius:3px;
}

.loading:after{
    animation-delay:600ms;
}

@keyframes motion{
    0% {left:0; width:0;}
    20% {left:20%; width:60%;}
    40% {left:30%; width:20%;}
    60% {left:60%; width:10%;}
    80% {left:70%; width:30%;}
    100% {left:100%; width:0;}
}

我添加了悬停时的高度过渡(这可能是事件监听器上发生的情况，而不是从 height:0; 开始)。