CSSを使ったアニメーションについて

CSS3の普及がすすみ、今ではCSSだけでホームページに動きをつけられるようになっています。
アプリのようにクリックやスクロールなどの操作に合わせて動かすことはできないものの、CSSだけで出来る表現の幅はグンと広がりました。

FlashやJavaScriptだけで要素を動かそうとすると動作が重くなりがちなので、適宜CSSと使い分けることでブラウザの負荷を小さくすることにもつながります。

『transition』、もしくは『animation』、どちらかのプロパティを使うことで、要素を動かせます。

 

CSSアニメーション1 『transition』プロパティ

transitionとは、直訳で「移り変わり」、「変遷」、「変化」という意味で、このプロパティは時間経過とともに変化させるために使います。
マウスカーソルをボタンに乗せたときに、ボタンの色を滑らかに変えたり、影をつけたり、という表現を可能にします。

transitionプロパティ

 

次の4つのプロパティを使って設定します。
『transition-property』『transition-duration』『transition-timing-function』『transition-delay』

 

transition-property

滑らかに変化させたいCSSプロパティ名を指定します。複数の場合はカンマ区切りで指定できます。

例:opacityとwidthを変化させたい場合


E {
  transition-property: opacity,width;
}

 

transition-duration

何秒かけて変化させるかを設定するプロパティです。数値+sで秒数を指定します。

例:0.5秒かけて変化させる場合


E{
  transition-duration: 0.5s;
}

 

transition-timing-function

加速曲線(変化の仕方)を指定します。

例:開始と完了を滑らかにする場合


E{
  transition-timing-function: ease;
}

transition-timing-functionプロパティには、他にも次の値が用意されています

linear 一定速度で変化する
ease-in 少しずつ加速する
ease-out 少しずつ減速する
ease-in-out 少しずつ加速し、少しずつ減速する(easeの変化具合を少し大きくしたイメージ)
cubic-bezier(数値,数値, 数値,数値,) 変化の具合をオリジナルで設定できます。
cubic-bezier.comさん[url: http://cubic-bezier.com/]などを見るとわかりやすいです

 

transition-delay

変化するまでの待機時間を指定します。数値+sで秒数を指定します。

例:読み込み完了後0.5秒待ってから変化させる場合


E{
  transition-delay:0.5s
}

 

上記4つのプロパティのショートハンド(省略形)として、transitionプロパティも使えます。

例:background-colorプロパティ1秒かけて滑らかに変化させる。ただし0.5秒後に変化が始まる。という設定


E{
  transition: background-color 1s ease 0.5s;
}

※ショートハンドを使う場合、先に出てくる秒数がtransition-durationの値になる点だけ注意が必要です。

 

transitionを使ったアニメーションの注意点

hoverなどの疑似クラス側にtransitionプロパティを指定すると、マウスカーソルを離した時にtransitionが動作しない現象が起こります。

transitionアニメーション2

カーソルを合わせたときは滑らかに変化するけど、離したときはすぐ変化する

 

例:hover側にtransitionプロパティを書いてしまうと、要素からマウスカーソルを離したときに、transitionが発生しません。


a{
  background-color:#f66;
}
a:hover{
  transition:background-color 0.5s;
  background-color:#ccc;
}

 

 

CSSアニメーション2 『@keyframes規則 + animation プロパティ』

animationは単語そのまま、アニメーションを設定するときに使うプロパティです。
transitionプロパティと違い、こちらは動きの繰り返しも設定することが可能です。

animationアニメーション

 

@keyframes規則で、経過点ごとの状態を設定して、次の7のプロパティを組み合わせて動作時間や繰り返し回数等を設定します。
『animetion-name』『animetion-delay』『animation-direction』『animation-duration』『animation-fill-mode』『animation-iteration-count』『animation-timing-function』

 

まず、@keyframes規則で、アニメーションを設定します

例:『anime2』という名前のアニメーションを作る


@keyframes anime2{
  0%{
    opacity:0;
    width:100px;
  }
  100%{
    opacity:1;
    width:200px;
  }
}

例はopacityとwidth、2つのプロパティを変化させています。

%値は経過点のことで、0%はアニメーション開始時点、100%はアニメーション終了時点の事を示します。
10秒のアニメーションの場合は、0%が0秒時点、50%は5秒時点、100%は10秒時点を示します。

 

animation-name

@keyframesで宣言したアニメーションの名称を指定します。

例:アニメーションの名称が『anime2』だった場合


E{
  animation-name:anime2;
}

 

animation-delay

アニメーションが始まるまでの待機時間を指定します。

例:0.5秒待った後、アニメーションを開始させる場合


E{
  animation-delay:0.5s;
}

 

animation-direction

アニメーションを繰り返す場合の動作を指定します。

例:順方向と逆方向を交互に実行する場合


E{
  animation-direction: alternate;
}

 

animation-duration

アニメーションが始まって、完了するまでの時間を指定する

例:0.5秒かけて動かす場合


E{
  animation-duration:0.5s;
}

 

animation-fill-mode

アニメーションが完了したあと、初期状態に戻すか、そのままで止めるかを指定する。

例:最後の動きのまま止める場合


E{
  animation-fill-mode:forwards;
}

 

animation-iteration-count

繰り返す回数を数値で指定します。

例:5回繰り返す場合


E{
  animation-iteration-count:5;
}

回数を指定せず、永続的に繰り返す場合は次の値を指定します。


E{
  animation-iteration-count:infinite;
}

 

animation-timing-function

加速曲線(変化の仕方)を指定します。

例:開始と完了を滑らかにする場合


E{
  animation-timing-function:ease;
}

animation-timing-functionプロパティには、他にも次の値が用意されています

linear 一定速度で変化する
ease-in 少しずつ加速する
ease-out 少しずつ減速する
ease-in-out 少しずつ加速し、少しずつ減速する(easeの変化具合を少し大きくしたイメージ)
cubic-bezier(数値,数値, 数値,数値,) 変化の具合をオリジナルで設定できます。
cubic-bezier.comさん[url: http://cubic-bezier.com/]などを見るとわかりやすいです

 

上記7つのショートハンド(省略形)としてanimationプロパティも使えます。

例:anime1というアニメーションを、1秒かけて滑らかに動かす。繰り返す回数は3回で、完了後はそのまま止まる順方向と逆方向を交互に繰り返す。ただし0.3秒後に変化が始まる。という設定


E{
  animation:anime1 1s ease 3 forwards alternate 0.3s;
}

※ショートハンドを使う場合、先に出てくる秒数がanimation-durationの値になる点だけ注意が必要です。

 

まとめ

以上、CSSを使ったアニメーションの2つの方法でした。
プロパティの中に別のプロパティを書かないといけなかったり、変化の内容と時間を別々に設定しなければいけなかったりするので、初めは混乱することも多いと思いますが、
値を少しずつ変えて、実際の変化を見ることで少しずつ分かるようになると思います。実践あるのみです!

Webサイトに動きをつけようとすると、『Flashを使う』しかなかった時代もありました。しかし、ブラウザの機能が充実したこと、多くのスマートフォンでは初期状態でFlashを実装していないことなど、様々な理由でFlashを使わない考えが主流になってきています。SEOにとっても良い動きだと思います。

検索エンジンはFlashの内容を適切に読み込めないとされていて、SEOを考えると不利な場面が多くなります。Flashを使わず、CSSやJavaScriptなど、ブラウザの標準機能を使うことで、SEOにも強いサイトを構築できますので、アニメーション実装する際には可能な限りCSSアニメーションを積極的に取り入れていきましょう。

 

 

すべての人にインターネット
関連サービス