【CSS3】ローダーアニメーション2

udemy動画内容の備忘録・メモです

• ５つの縦線を設置し、それぞれに遅延時間を設ける。
• timing-iteration-count: infiniteで永久にアニメーション。

index.html

  <div class="rect-spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

Scss記法

style.scss

  .rect-spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    letter-spacing: -2px;

    & > div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;
      @include animation(
        $name: sk-stretchdelay,
        $duration: 1.2s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
      );
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation-delay: -1.3s + $i * 0.1s;
        }
      }
    }
  }

  @keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
    }
    20% {
      transform: scaleY(1);
    }
  }