CSS3アニメーションのおさらいとローディングアイコン

「CSS3でつくるローディングアイコン」っていうのを何も考えずに作ったんですけど、同じこと考える人なんかたくさんいるので、1年くらい前から色々存在してました・・・でもせっかくつくったので、もうありますけど、公開しておきます。

くるくる と ぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう！（今おもいついたから強引につかったとこだけ）

CSS3アニメーションのおさらい

ご存知の通り、アニメーションは今のところWebkitだけで実装されいるので、サンプルはWebkit系ブラウザでみてください。

ざっくり書いたので、説明していない項目もあるし、間違いあるかも。あると思います。指摘してください。草稿しっかり読めっていう話なんですけど・・・ざっくりしか読んでません

W3CのWorkingDraft – CSS Animations Module Level 3

草稿にはもちろんprefixの”@-webkit-”は含まれてません。

Keyframes

基本的にWebkit用に”@-webkit-”のprefixを付けます。

@-webkit-keyframes hoge {
}

のように、hogeのところにアニメーション名を入れて定義します。Keyframesの指定方法は

@-webkit-keyframes hogefuga {
  0% { hoge }
  50% { fuga }
  100% { piyo }
}

みたいに、アニメーションを細かく%で指定する方法や

@-webkit-keyframes hogepiyo {
  from { hoge }
  to { fuga }
}

みたいに、fromとtoで指定する2つの方法があります。

Keyframesは、下記のように”-webkit-transform”やopacity、top、leftなど数値を伴うCSSプロパティが使えます。background-colorなどの色も可。

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes fade {
  0% { opacity: 1; }
  50% { opacity: .2; }
  100% { opacity: 1; }
}

Animation behavior

どういうアニメーションをするかをKeyframesで指定しておいたので、実行する環境を用意します。

いくつかあるのですが、ここでは”duration”, “timing-function”, “count”, “name”の指定方法だけ解説しておきます。対象要素にbehaviorプロパティを割り振ります。

duration

durationは”○s”で指定、1以下は0.8や.8のように秒で指定します。デフォルトは0。

webkit-animation-duration: .8s; 

timing-function

jQueryの.animate()メソッドで言うところのeasingです。

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

via: The ‘animation-timing-function’ Property

の6つが利用できます。デフォルトはease。

-webkit-animation-timing-function: linear;

iteration-count

実行回数を指定できます。単純に数字で指定でき、リピートしたい場合は、infiniteを指定します。デフォルトは1。

-webkit-animation-iteration-count: infinite;

name

実行するKeyframe名を指定します。これが指定されているとアニメーションが実行されます。

div.cssloading.justLoading {
  -webkit-animation-name: fade, rotate;
}

CSS3 Loading

さらっとおさらいしたところで、ローディングアイコンを書いてみましょう。本当はこっちメインだったのに、もう手抜き。説明はソース見てくださいまし。

Circular

まずは超ベーシックはくるくる回転タイプ。

CSS loader – kurukuru – - jsdo.it – share JavaScript, HTML5 and CSS

アニメーション以外

div.cssloading {
  width: 48px;
  height: 48px;
  position: relative;
}

  div.cssloading span {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
  }
  div.cssloading span.loadingCircle1 {
    top: 3px;
    left: 19px;
    background: #000;
  }
  div.cssloading span.loadingCircle2 {
    top: 7px;
    left: 30px;
  }
  div.cssloading span.loadingCircle3 {
    top: 19px;
    left: 35px;
  }
  div.cssloading span.loadingCircle4 {
    top: 30px;
    left: 30px;
  }
  div.cssloading span.loadingCircle5 {
    top: 35px;
    left: 19px;
    background: #CACACA;
  }
  div.cssloading span.loadingCircle6 {
    top: 30px;
    left: 8px;
    background: #979797;
  }
  div.cssloading span.loadingCircle7 {
    top: 19px;
    left: 3px;
    background: #676767;
  }
  div.cssloading span.loadingCircle8 {
    top: 7px;
    left: 8px;
    background: #343434;
  }

アニメーション該当箇所のみ

/* 回転する name: rotate */
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}
/* フェードエフェクト name: fade */
@-webkit-keyframes fade {
  0% { opacity: 1; }
  50% { opacity: .2; }
  100% { opacity: 1; }
}

/* アニメーションプロパティのセット */
div.cssloading {
  -webkit-animation-duration: .8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
/* classに"justLoading"が付いているときは
"fade", "rotate"のアニメーションを行う */
div.cssloading.justLoading {
  -webkit-animation-name: fade, rotate;
}

Horizontal

次は横にぼいんぼいんはねる玉っぽいの

CSS loader – boinboin – - jsdo.it – share JavaScript, HTML5 and CSS

アニメーション以外

div.cssloading {
  width: 200px;
  height: 40px;
  position: relative;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
}
div.cssloading.justLoading {
  -webkit-animation-name: move, bound, fade;
}

  div.cssloading span {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 80px;
    background: #000;
  }

アニメーション該当箇所のみ

/* ぼいんぼいん name: bound */
@-webkit-keyframes bound {
  0% { -webkit-transform: scale(1.5, .5); }
  10% { -webkit-transform: scale(1, 1); }
  25% { -webkit-transform: scale(.5, 1); }
  50% { -webkit-transform: scale(1.5, .5); }
  60% { -webkit-transform: scale(1, 1); }
  75% { -webkit-transform: scale(.5, 1); }
  100% { -webkit-transform: scale(1.5, .5); }
}

/* 横移動 name: move */
@-webkit-keyframes move {
  0% { left: 0px; }
  10% { left: 70px; }
  25% { left: 80px; }
  35% { left: 70px; }
  50% { left: 0px; }
  60% { left: -70px; }
  75% { left: -80px; }
  85% { left: -70px; }
  100% { left: 0px; }
}

/* アニメーションプロパティのセット */
  div.cssloading {
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
}
/* classに"justLoading"が付いているときは
"fade", "rotate"のアニメーションを行う */
div.cssloading.justLoading {
  -webkit-animation-name: move, bound, fade;
}

そんなわけで

ローディングアイコンメインのはずが、かぶったからおさらいメインになったという話。