steps() start和end表现示意实例页面

展示

代码

• HTML：

  <h4>steps(5, start)</h4>
  <div class="container"><i class="start"></i></div>
  
  <h4>steps(5, end)</h4>
  <div class="container"><i class="end"></i></div>

• CSS：

  .container {
      width: 101px; height: 30px;
      margin: auto;
      background: url(data:image/png;base64,iVBOR...) no-repeat;
  }
  .start,
  .end {
      display: block;
      width: 20px; height: 20px;
      margin-left: -10px;
      border-radius: 50%;
      background-color: deepskyblue;
      background-image: radial-gradient(2px, red 2px, transparent 3px);
      opacity: .6;
      position: relative;
      animation: move 5s linear infinite;
  }
  .start {
      animation-timing-function: steps(5, start);
  }
  .end {
      animation-timing-function: steps(5, end);
  }
  @keyframes move {
      0% { left: 0; }
      100% { left: 100px; }
  }