【CSS】@keyframesを使って簡易なアニメーションを作る!

HTMLで簡易なアニメーションを作成するにはCSSの@keyframesを使用します。

@keyframesとはアニメーションの動きを指定することができる特別な書式であり、@keyframesにanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することでアニメーションを作成することができます。

今回は、@keyframesを使って簡易なアニメーションを作成する方法について以下の内容で解説していきます。

⚫︎ 要素の色を変えるアニメーションを作成する場合
⚫︎ 要素の長さを変えるアニメーションを作成する場合
⚫︎ 要素をふわりと出現させるアニメーションを作成する場合
⚫︎ 要素を回転させるアニメーションを作成する場合
⚫︎ 要素の立体的なアニメーションを作成する場合

@keyframesとは

@keyframesとは、アニメーションの動きを指定することができる特別な書式であり、要素にアニメーションをつけたい場合は@keyframesの中に記述します。

@keyframesの書き方

@keyframesの書き方は下記となります。

プロパティの値を変化させるタイミングの「%」は自由ですが「0%」と「100%」は必ず指定する必要があります。
0%は「from」、100%は「to」と書くことも可能です。

また書くタイミングで指定するプロパティの数は自由です。

@keyframesだけではアニメーションは動かない

@keyframesだけではアニメーションが動きません。
なぜなら、@keyframesはアニメーションをつける書式だからです。

アニメーションを動かすようにするにはanimationプロパティを使用する必要があります。

@keyframesとanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することができ、アニメーションを作成することができます。

基本的なアニメーションのサンプルコード

基本的なアニメーションのサンプルコードを紹介します。

要素の色を変えるアニメーションを作成する場合

@keyframesとanimationプロパティを使用して色を変えるアニメーションを作成します。

sample.html

style.css

出力結果

背景の色が変わります。

@keyframesとanimationプロパティを使用し、要素の背景色が変わるアニメーションを作成しています。

要素の長さを変えるアニメーションを作成する場合

@keyframesとanimationプロパティを使用して要素の長さを変えるアニメーションを作成します。

sample.html

style.css

出力結果

要素の長さが変わります。
要素の長さが変わります。

@keyframesとanimationプロパティを使用し、要素の長さを変えるアニメーションを作成しています。

要素をふわりと出現させるアニメーションを作成する場合

@keyframesとanimationプロパティを使用して要素をふわりと出現させるアニメーションを作成します。

sample.html

style.css

出力結果

要素が現れます。

@keyframesとanimationプロパティを使用し、要素をふわりと出現させるアニメーションを作成しています。

要素を回転させるアニメーションを作成する場合

@keyframesとanimationプロパティを使用して要素の長さを変えるアニメーションを作成します。

sample.html

style.css

出力結果

要素が回転します。

@keyframesとanimationプロパティを使用し、要素が回転するアニメーションを作成しています。

要素を立体的に回転するアニメーションを作成する場合

@keyframesとanimationプロパティを使用して要素の立体的なアニメーションを作成します。

sample.html

style.css

出力結果

@keyframesとanimationプロパティを使用し、要素が立体的に回転するアニメーションを作成しています。

今回のポイント

@keyframesでアニメーションを作成

⚫︎ @keyframesとはアニメーションの動きを指定することができる特別な書式である

⚫︎ @keyframesは「0%」と「100%」は必ず指定する必要があり、0%は「from」、100%は「to」と書くことも可能である

⚫︎ @keyframesとanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することができ、アニメーションを作成することができる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し