CSS
CSS3
jQuery
animation
loading

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

css3でloadingアニメーションを作ってみたまとめです。

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

animationの設定

書き方とそれぞれのメモ。

css
.loading {
  animation: animation-name animation-duration animation-timing-function animation-delay animation-delayunt animation-direction;
}

@keyframes 任意の名前 {
  from {
    /* アニメーション開始時のスタイル */
  }
  to {
    /* アニメーション終了時のスタイル */
  }
}
animation-name: @keyframesで付けた任意の名前

animation-duration: アニメーションの時間

animation-timing-function: 動き方(ease, linear, ease, ease-out, ease-in-out, cubic-bezier)

animation-delay: アニメーションがスタートする時間

animation-delayunt: アニメーションの繰り返し(infinite: 無限に繰り返す、数値: 回数)

animation-direction: 逆再生の設定。defaultはnormal。alternateが逆再生。

画像をcssでアニメーション

まずは画像を使って、cssで動かしてみます。
くるくる回る、あれです。

html
<body>
  <img class="loading" src="../loading/assets/img/tyopress.svg" alt="loading">
</body>
css
.loading {
  animation: loading 1s linear infinite;
}

@keyframes loading {
  from {
  }
  to {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}

これだけで、簡単にアニメーションが追加出来ました。

fromとtoは%に置き換えて、ポイントを増やすことも出来ます。
例えば、こんな感じ。
くるくる回りながら上下するアニメーションです。

css
@keyframes loading {
  0% {
  }

  50% {
    margin-top: 100px;
  }

  100% {
    margin-top: 0;
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}

全部cssで書いてみる

さらに、画像部分もcssだけで書いてみます。
視力検査のあれがくるくる回ります。

html
<div class="loading"></div>
css
.loading {
  width: 50px;
  height: 50px;
  border: 5px solid #000;
  border-right: 5px solid transparent;
  border-radius: 30px;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  to {
  }

  from {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}

ポイントを増やして、変化をつけてみます。

css
@keyframes loading {
  0% {
  }

  50% {
    opacity: .6;
  }

  100% {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
    opacity: .3;
  }
}

cssだけで書けるから、ちょっとした手直しも気軽に出来るのがいいですね。

jQueryでページに埋め込む

せっかくなので、loadingとして機能するようにページに埋め込んでみます。
*ここからはjQueryで設定します。

jQueryの基本、おさらい

jQuery
$(window).on('load',function(){
  // DOM,画像の読み込みが全て終わったらする処理
});

$(function(){
  // DOMの読み込みが終わったらする処理
});

*jQueryの読み込み、書き方などは省いています。

loadingの表示、非表示

今回は、DOM,画像の読み込みが全て終わったらloadingを非表示に、
コンテンツ部分を表示するように設定します。

html
<body>
  <div class="loading"></div>

  <div class="content"></div>
</body>
jQuery
$(window).on('load',function(){
  $('.loading').fadeOut('fast'); // 画像が全て読み込まれたら.loadingを非表示
  $('.content').fadeIn('slow'); // 画像が全て読み込まれたら.contentを表示
});

さらに、loadingの時間を任意で設定したい場合。

css
.content {
  display: none; /* あらかじめ.contentを非表示にしておく */
}
jQuery
$(window).on('load',function(){
  var loading = function(){
    $('.loading').fadeOut('fast');
    $('.content').fadeIn('slow');
  };
  setTimeout(loading,3000); // setTimeoutを使って表示時間を設定する
});

これで、任意の時間でloadingの時間を設定できました。

See the Pen JLrJgR by kayukihashimoto (@kfunnytokyo) on CodePen.

おわり。