CSSアニメーションを作る その1【基本編】

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

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

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

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

 

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

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

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

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

keyframesでアニメーションの内容を設定

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

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

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

@keyframes ○○{
 from(0%){
	  最初の状態
	  }
 to(100%){
	  最後の状態
	  }
}

と書きます。

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

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

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


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

アニメーションの詳細条件を設定

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

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

アニメーション名keyframesでつけた名前
変化にかかる時間s またはmsで指定
変化の割合ease linearなど
再生される回数何回再生するかまたは無限
遅れる時間再生開始までの時間
方向順向きか逆向きか転換式か
アニメーション前後のスタイル定義次回以降詳細
再生中/一時停止runningかpause

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

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

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

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

  animation: sample 3s infinite;
 

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

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

複数のアニメーションをセットできる

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

たとえば

@keyframes sample2 {
  to{
   background:navy;
  }
}

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

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

背景色の変化(sample2)には0.5秒と指定しているので、移動(sample)アニメーションが1回行われる間に6回のアニメーションが行われることになります。

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

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月2日HTML/CSSanimation,css,transition

Posted by ミフネWEB