Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

css3で作るloadingアニメーションの続き。
cssだけで作ったloadingアニメーションのまとめです。

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

丸の透明度が変化する(横並び)

01.jpg

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
.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

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
.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

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
.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

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
.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

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
.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

html
<body>
  <div class="blinker">
    <div class="blinker__background"></div>
    <div class="blinker__bar"></div>
    <div class="blinker__circle"></div>
  </div>
</body>
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

まとめ

See the Pen Css3 Loading Animation 02 by kayukihashimoto (@kfunnytokyo) on CodePen.

おわり。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away