WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

以前はWebサイト上でアニメーションをさせようとすると、JavaScriptを使って動きをつけていましたが、最近はCSSだけで表現できる幅が広がりアニメーションもCSSでつけることが多くなりました。ですが、CSSのアニメーションにも【transition】と【animation】とあり、結局どちらを使うのが良いの？と疑問に思う方もいらっしゃるかと思います！両者の違いについてと、記述例を一緒にご紹介をしていきます。

transitionプロパティとは

transitionプロパティは馴染みがある方も多いのではないでしょうか。

transitionプロパティは@keyframesの設定が必要ありません。
要素ごとに個別の設定をしていきます。
そして、トリガーが必要となるため【:hover】や【:active】に対して記述をします。要するにアニメーション開始のきっかけが必要ということです。

animationプロパティとの大きな違いは、transitionプロパティは変化前と変化後のつなぎ方を設定するのみなので詳細な設定ができません。

簡易的なアニメーションをつけたい場合にはtransitionプロパティでアニメーション効果をつけるのが良いでしょう。

記述例

See the Pen
Untitled by saki kurita (@saki_0415)
on CodePen.

ボタンをhoverすると背景色が0.7秒かけて変化するようにしています。サイトの雰囲気に合わせて速くしたり遅くしたりするだけで印象を変えることができますね。

animationプロパティとは

続いて、animationプロパティについて説明します。
animationはkeyframesで指定した動きを要素に設定します。

animationプロパティで指定した要素に「何秒かけてアニメーションさせるか（animation-duration）」、「何回アニメーションさせるか（animation-iteration-count）」といった設定をすることでアニメーションさせることができます。

keyframesとは

keyframesはアニメーションの動きを指定することができます。
最初は非表示（opacity:0）から段々と見える状態に変化していく（opacity:1）といった動きの中に、最初と最後だけではなく途中経過のアニメーションを細かく設定することができます。

記述例

See the Pen
Untitled by saki kurita (@saki_0415)
on CodePen.

keyframesの記述の中を見てもらうとまず、アニメーションに任意の名前をつけることができます。それをanimation-nameで定義して使用することが可能になります。
そして0%はアニメーション開始時、100%はアニメーション終了時を表しています。0%から100%の間に他の数値を入れたり、0%からではなく50%（アニメーションの途中（半分））から開始させるなど、細かく数値設定をすることができます。

まとめ

CSSアニメーションとJavaScriptを組み合わせてより複雑な動きや、リッチなサイト制作も可能になりますね。
簡易的なアニメーションか、より複雑なアニメーションにするかで記述方法も変わってきますので、ぜひ記述例をもとに試してみてください。