Techブログ

Tech blog

インターン生ブログ

CSSアニメーションの使用方法

カテゴリ:インターン生ブログ

2020.06.11

このエントリーをはてなブックマークに追加

CSSアニメーションとは

あるCSSのスタイル設定を別の設定へ変化させることを可能にするツールです。基本的には二種類の要素で構成されていて、アニメーションについて記述する要素と、アニメーションの始めと終わりのCSSスタイルを示すキーフレーム要素です。同様にアニメーション途中の通過点となるスタイルを示すこともできます。

主なメリットはJavaScriptを知らない場合でもアニメーションを作ることができる点や、システム負荷がそこまで大きくないことが挙げられます。

アニメーションの設定

CSSアニメーションの流れを作成するためには、アニメーションさせたい要素にanimationプロパティまたはそのサブプロパティを付けます。このプロパティはアニメーションのタイミングと長さを設定し、アニメーションをどのように進めるかの詳細も設定することができます。アニメーションの外見を指定するものではないので、外見を指定するにはキーフレーム(@keyframe)で定義します。

下に主なサブプロパティを示します。

animation-nameアニメーションのキーフレームを示す名前を指定
animation-duration一回のアニメーションサイクルに要する時間の長さを設定
animation-timing-functionアニメーションの進め方を設定
animation-delay
要素が読み込まれてから始めるまでの遅延時間を設定
animation-directionアニメーションの動作終了後に逆方向に繰り返すか、はじめの状態にリセットして繰り返すかの設定
animation-iteration-countアニメーションを繰り返す回数を設定
(無限に繰り返すにはinfinite を指定)
animation-fill-modeアニメーション実行前後に指定したスタイルを適用するかの設定
animation-play-stateアニメーションを一時停止したり再開したりすることができる。

キーフレームによるアニメーションの流れの定義

アニメーションのタイミングなどを指定したあとは、アニメーションの外見を定義する必要があります。これをするために、@keyframeを用いて、各キーフレームでアニメーションの流れの中で要素がどのように表現されるかを記述します。

CSSスタイルでアニメーションのタイミングを指定するため、キーフレームを<percentage>で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。0%がアニメーションの始点、100%がアニメーションの終点を表していて、0%をfrom,100%をtoで代替することもできます。また、任意でアニメーションの始まりと終わりの間の、中間地点をいくつか追加することも可能です。(%表示)

(ex)メニューバーの表示

スマホ版のウェブサイトでよく見かける右端メニューバーがあり、クリックするとメニューの中身が表示されるようなアニメーションの例を紹介します。必要がない場合にはしまっておきたいので、もしクリックして表示したとしてももう一回クリックすることで戻すことができるようにします!

また、下のボタンはマウスをホバーした時に少し上にあがるようにして、ホバーしたことをわかりやすくしてあります。もし気になる人がいれば下のコードを実行してみてください!

ポイントはCSSでクリックイベントを作成する際に、非表示のinputタグを用いて、適用する範囲をlabelで囲み、クリックイベントのトリガーとして機能させることです。また、キーフレームの中に from , to 以外に % を用いて細かく設定することで、より作成者の思い通りの動きに近づけることができます。

また、僕がつまづいたポイントとして、クリックイベントを用いてアニメーションをした時、終わった状態からもう一回元の状態に戻したい場合には、クリックしていない時の状態への戻るためのアニメーションも設定する必要があることです。これが無いと元の状態へクリックを用いて戻すことができなくなるので、開いたり閉じたりが必要な場合には注意しましょう!

一覧へ戻る

記事をカテゴリから探す