css3で作るloadingアニメーション 続

[css3で作るloadingアニメーション](http://qiita.com/kfunnytokyo/items/cb4bcf4880dadac3f2e8)の続き。
cssだけで作ったloadingアニメーションのまとめです。


<img width="2560" alt="css3で作るloadingアニメーション 続" src="https://qiita-image-store.s3.amazonaws.com/0/139029/e2e17db0-8f56-b599-b783-c757b22a85eb.jpeg">


#丸の透明度が変化する（横並び）

![01.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/07ef1824-bf7c-14f8-fb4f-4b87db45a2eb.jpeg)


```html:html
<body>
  <div class="circle">
    <div class="circle__item1"></div>
    <div class="circle__item2"></div>
    <div class="circle__item3"></div>
    <div class="circle__item4"></div>
    <div class="circle__item5"></div>
  </div>
</body>
```

```scss:scss
.circle {
  display: flex; // 丸を横並びにする。
}

// 丸1個の基本設定
@mixin circle__item($delay: 0s) { // 引数に開始時間を遅らせる変数を入れる。初期設定は0s。
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  margin: 5px;
  animation: opacity 2s linear $delay infinite; // アニメーション追加。
}

// 丸を5個生成して開始時間を遅らせる。
@for $i from 1 through 5 {
  .circle__item#{$i} {
    @include circle__item($i*.25s); // 開始時間を0.25s遅らせる。
  }
}

// アニメーション設定。
@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: 1;
  }
}
```

#丸の透明度が変化する（円状）

![02.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/58cde507-73ef-33cc-e983-8f1dd19cf661.jpeg)

```html:html
<body>
  <div class="circle">
    <div class="circle__item1"></div>
    <div class="circle__item2"></div>
    <div class="circle__item3"></div>
    <div class="circle__item4"></div>
    <div class="circle__item5"></div>
    <div class="circle__item6"></div>
    <div class="circle__item7"></div>
    <div class="circle__item8"></div>
  </div>
</body>
```

```scss:scss
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  margin: 10px;
}

// 丸1個の基本設定
@mixin circle__item($delay: 0s) { // 引数に開始時間を遅らせる変数を入れる。初期設定は0s。
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate 2s linear $delay infinite; // アニメーション追加。
}

// 丸を8個生成して開始時間を遅らせる。
@for $i from 1 through 8 {
  .circle__item#{$i} {
    @include circle__item($i*.25s); // 開始時間を0.25s遅らせる。
  }
}

// 丸それぞれのポジション。
.circle__item1 {
  top: -1px;
  left: 20px;
}
.circle__item2 {
  top: 5px;
  left: 35px;
}
.circle__item3 {
  top: 20px;
  left: 41px;
}
.circle__item4 {
  top: 35px;
  left: 35px;
}
.circle__item5 {
  top: 41px;
  left: 20px;
}
.circle__item6 {
  top: 35px;
  left: 5px;
}
.circle__item7 {
  top: 20px;
  left: -1px;
}
.circle__item8 {
  top: 5px;
  left: 5px;
}

// アニメーション設定。
@keyframes rotate {
  0% {
    opacity: 0;
  }

  50% {
    background: #333;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
```

#丸が上下に動く（虫みたい。。）

![03.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/0bfcda79-cd0b-6249-ec9c-c880bc6b521d.jpeg)

```html:html
<body>
  <div class="circle">
    <div class="circle__item1"></div>
    <div class="circle__item2"></div>
    <div class="circle__item3"></div>
    <div class="circle__item4"></div>
    <div class="circle__item5"></div>
    <div class="circle__item6"></div>
  </div>
</body>
```

```scss:scss
.circle {
  display: flex; // 丸を横並びにする。
}

@mixin circle__item($delay) { // 引数に開始時間を遅らせる変数を入れる。初期設定は0s。
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  margin-left: 5px;
  animation: jump 1.3s ease-in-out $delay infinite; // アニメーション追加。
}

// 丸を6個生成して開始時間を遅らせる。
@for $i from 1 through 6 {
  .circle__item#{$i} {
    @include circle__item($i*.1s); // 開始時間を0.1s遅らせる。
  }
}

// アニメーション設定。
@keyframes jump {
  0% {
  }

  20% {
    margin-top: 50px;
  }

  40% {
    margin-top: 20px;
  }

  60% {
    margin-top: 50px;
  }

  100% {
    margin-top: 0;
  }
}
```

#棒が上下する（棒グラフ、もしくはガラケーの電波風）

![04.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/cc8e2eb4-6234-e137-f430-cf0dd0137daf.jpeg)

```html:html
<body>
  <div class="bar">
    <div class="bar__item4"></div>
    <div class="bar__item3"></div>
    <div class="bar__item2"></div>
    <div class="bar__item1"></div>
  </div>
</body>
```

```scss:scss
.bar {
  display: flex; // 棒を横並びにする。
  height: 50px;
  transform: rotate(180deg); // 下から上に伸びたように見せるため、180度回転させる。
}


// 棒1個の基本設定。
@mixin bar__item($delay: 0s) { // 引数に開始時間を遅らせる変数を入れる。初期設定は0s。
  width: 8px;
  height: 0;
  background: #999;
  margin-left: 10px;
  animation: stretch 1.5s linear $delay infinite; // アニメーション追加。
}

// 棒4個生成して開始時間を遅らせる。
@for $i from 1 through 4 {
  .bar__item#{$i} {
    @include bar__item($i*.25s); // 開始時間を0.25s遅らせる。
  }
}

// アニメーション設定。
@keyframes stretch {
  0% {
    height: 0;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 0;
  }
}
```

#パネルが360度回転する（hoverでカラーが変化する）

![05.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/5fc50911-a3a5-1592-cca2-fd8cb7e3cf58.jpeg)

```html:html
<body>
  <div class="square">
    <div class="square__item1">l</div>
    <div class="square__item2">o</div>
    <div class="square__item3">a</div>
    <div class="square__item4">d</div>
    <div class="square__item5">i</div>
    <div class="square__item6">n</div>
    <div class="square__item7">g</div>
  </div>
</body>
```

```scss:scss
.square {
  display: flex; // 四角を横並びにする。
}

// square 基本
@mixin square__item($delay: 0s) { // 引数に開始時間を遅らせる変数を入れる。初期設定は0s。
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #999;
  color: #fff;
  font-size: 10px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  animation: rotate 5s ease $delay infinite; // アニメーション追加。
  &:hover {
    background: #00b7ee; // hoverでbackgroundのカラー変化。
    transition: .5s ease;
  }
}

// 四角を7個生成して開始時間を遅らせる。
@for $i from 1 through 7 {
  .square__item#{$i} {
    @include square__item($i*.15s); // 開始時間を0.15s遅らせる。
  }
}

// アニメーション設定。
@keyframes rotate {
  0% {
  }

  50% {
    transform: rotateX(360deg);
  }

  100% {
  }
}
```

#ウインカー風（hoverでスピードアップ）

![06.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/16c60a30-4b20-794a-ee12-c75b4050d3a2.jpeg)

```html:html
<body>
  <div class="blinker">
    <div class="blinker__background"></div>
    <div class="blinker__bar"></div>
    <div class="blinker__circle"></div>
  </div>
</body>
```

```scss:scss
.blinker {
  position: relative;
  &__background { // 背景の半円部分
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    background: #eee;
  }
  &__bar { // ウィンカー部分
    width: 2px;
    height: 40px;
    background: #666;
    position: absolute;
    top: 8.5px;
    left: 47.5px;
    transform: rotate(-90deg);
    transform-origin: center bottom;
    animation: rotate 1s ease-in-out 0s infinite; // アニメーション追加。
  }
  &__circle { // 手前の半円部分
    width: 25px;
    height: 12.5px;
    border-radius: 12.5px 12.5px 0 0;
    background: #999;
    position: absolute;
    top: 37.5px;
    left: 37px;
  }
  &:hover {
    .blinker {
      &__background {
        background: #fb8c87; // hoverで背景の半円部分カラー変化。
        transition: .3s;
      }
      &__bar {
        background: #fff; // hoverでウィンカー部分カラー変化。
        transition: .3s;
        animation: rotate--fast .1s ease-in-out 0s infinite; // hoverでアニメーション追加。
      }
      &__circle {
        background: #fc5750; // hoverで手前の半円部分カラー変化。
        transition: .3s;
      }
    }
  }
}

// アニメーション設定。
@keyframes rotate {
  0% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

// rotate--fastアニメーション設定。
@keyframes rotate--fast {
  0% {
    transform: rotate(60deg);
  }

  50% {
    transform: rotate(70deg);
  }

  100% {
    transform: rotate(60deg);
  }
}
```

#おまけ：ぶさいくな魚（パック◯ン風）

![07.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/7d79c498-2fc0-c610-15bd-2fad16ddd0e8.jpeg)

#まとめ
<p data-height="265" data-theme-id="0" data-slug-hash="mxBMEL" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css3 Loading Animation 02" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/mxBMEL/">Css3 Loading Animation 02</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

おわり。