CSSアニメーションを作るその１【基本編】 | WEB制作の備忘録めもミフネWEB

CSSで作るアニメーションには@keyframesを使います。
一見すると難しそうにみえますが、transitionプロパティを知っている人なら至って簡単です。

transitionって何？　の人は前記事「transitionでアニメーション効果を作る」を先に読んでおくと良いかも。

INDEX

アニメーションの内容と設定は別々に作る

今回はこのサンプルを元に話をすすめます。

丸い要素を行ったり来たりさせているアニメーション。
静止時のcssはこんな設定です。

div{
  width: 6.0rem;
  height: 6.0rem;
  background:tomato;
  border-radius: 50%;
}

ここに「水平方向に移動」というアニメーションを指定したものが最初のサンプルになるというわけです。

まずはkeyframesによるアニメーション内容の指定から見ていきます。

まず@keyframesでアニメーション内容を設定します。

設定方法は２通りあり、from toで最初と最後だけ指定する方法と、0% 10% 20% 、、100%と細かく設定する方法があります。
％指定の場合、0%と100%の間をどこまで細かく区切るのかは任意です。0%、20%、100%など間がとんでも大丈夫。

@keyframesを書くのはcssファイル内。
書き方は

@keyframes ANIMATION NAME{
　0%(またはfrom) {
	　　     最初の状態
	　　     }
　100%（またはto）{
	　　     最後の状態
	　　     }
}

と書きます。

@keyframesの後ろには、このアニメーションの名前をつけてやります。
その名前を使い、アニメーションを呼び出したい場所に指定することでアニメーションを表現するわけです。

今回でいえば、水平方向に移動ですのでX方向（横）に移動するtransforomプロパティの「translateX」です。それをkeyframesで書くとこうなります。

@keyframes sample{
 from{
     transform: transleteX(0);	
 }
 to{
     transform: translateX(300px); /* 移動距離 */
 }
}

@keyframesの設定はこれだけです。

次に、アニメーションを適用させたい要素に「animation」プロパティを使ってアニメーション設定をします。

transitionと同じく、変化にかかる時間　変化する割合（easeとか）などです。
詳細については次回以降に書く予定ですが、設定できる内容は下表の通りです。

全てを指定する必要はなく、最低限必要な名前と時間を指定すると後は初期値が適応されます。

とりあえず、冒頭の静止中サンプルcssに、名前と時間を指定してやります。

div{
 animation: sample 3s ;
}

このままだと、記事をここまで読み進めている間にアニメーションが終わっていると思うので、
再生回数に「infinite(無限)」も足しておきます。

変化の割合はease(ゆっくり)。方向は順方向。遅れはなし。など、指定した再生時間(3s)と回数（infinite）以外は初期値が適用されています。

ちなみに先ほどanimationに指定可能な値をたくさん書きましたが、書く順番は決まっていません。
ただし、「時間」と「遅れ」については両方とも秒数を指定することになるので、最初に書いた数字が時間、後の数字が遅れと認識されます。

見てきたように、アニメーション内容はkeyframesで別途作っているので、１つの要素に複数のアニメーションをセットすることも可能です。

たとえば

@keyframes sample2 {
  to{
   border-radius: 0;
  }
}

をつくって、animationプロパティにカンマ区切りで書き足してやります。なお、元の要素に設定があるプロパティの変化なら、from toは片方だけでも動きます。

#{
animation: sample 3s infinite,  sample2 .5s infinite ;
}

border-radiusの変化（sample2）には0.5秒と指定しているので、移動(sample)アニメーションが１回行われる間に６回のアニメーションが行われることになります。

このように、アニメーションごとに変化割合や時間を個別に指定できるので、複雑な変化をつけることも可能となります。