【CSS】アニメーションを作成する手順を解りやすく解説します【初心者向け】

こんにちは朱夏です。

今回は、CSSでアニメーションを作る時の手順を解説していきたいと思います。

朱夏

画面が表示されたときにタイトルがフェードインしたり、常に動き続けたりしている様なアニメーションの作り方を知りたい。

CSSの「animation」を使って、アニメーションを作る手順を、初心者でも解りやすく解説していきます。

それではいってみましょう。

アニメーションを作るための3つのステップ

アニメーションを作るのに必要な手順は、大きく分けると次の3ステップです。

基本的なCSSの書き方からすると複雑に感じるかもしれませんが、仕組みを理解していけばそこまで難易度の高いものではないはずです。

一つ一つ詳しく解説していきますね。

1.アニメーションさせたい対象を準備

初めに、アニメーションさせたい対象を準備します。

今回は、例として「回転し続ける正方形」を作ってみたいと思います。

サンプルはこちら。

See the Pen
JjYWMJO by 朱夏 (@syunatsu1)
on CodePen.

100pxの正方形を準備しました。
回転した時にはみ出さない様に中央に配置しています。

2.要素に「animation」プロパティを設定

今作成した要素に、「animation」プロパティを設定します。
「animation」プロパティは、要素を動かすときのスピードや開始タイミング、繰り返しの回数などを設定するためのプロパティです。

先程のサンプルに「animation」プロパティを追加してみます。

See the Pen
RwWpxBv by 朱夏 (@syunatsu1)
on CodePen.

こんな感じです。

「animation」プロパティの書き方は以下の様な感じです。

上記で指定した値は、それぞれ個別のプロパティで指定する事も可能です。

書き方と役割を以下に貼っておきますね。

各プロパティに設定できる値については、以下のサイトでまとめられていましたので参考にしてみてください。

www.htmq.com

 

17 Users

40 Pockets

animation－CSS3リファレンス

http://www.htmq.com/css3/animation.shtml

CSS3のプロパティ解説

因みに、「animation」プロパティの値は省略できるものもあります。
「animation-name」と、「animation-duration」の値さえ設定していれば、後は省略しても動作はします。
その場合、省略した値は初期値のものが指定されます。

3.「@keyframes」でアニメーションを設定

最終ステップです。
「@keyframes」では、「animation」プロパティで指定した名前をキーにして、アニメーションの動きを指定します。

先にサンプルを貼っておきます。

See the Pen
gOamvKM by 朱夏 (@syunatsu1)
on CodePen.

書き方としては以下の様になります。

「@keyframes」の後ろに「animation」プロパティで指定した名前を書きます。
これがセレクタとしての役割になります。

次にアニメーション処理の内容を書いていきます。
書き方の基本は、変更前の状態と変更後の状態を書くことで要素を変化させます。
今回は変更前と変更後で要素を一回転させています。

アニメーションの変化の設定について、今は0%と100%で最初と最後だけ指定していますが、動作の途中の変化を指定する事も出来ます。

例として、50%で正方形の色を青に変えてみました。

See the Pen
JjYWLRd by 朱夏 (@syunatsu1)
on CodePen.

こんな感じで途中で色を変える、位置を変えるなど、変化を付けて動かすことも可能です。

あとがき

というわけで、CSSのアニメーションを作る手順を解説してみました。

今回のまとめはこちら。

1. アニメーションさせたい対象を準備
2. 要素に「animation」プロパティを設定
3. 「@keyframes」でアニメーションを設定

ポイントは「animation」プロパティかなと思います。
ここで名前を決めて、「@keyframes」と紐づけるイメージが出来れば、「@keyframes」で指定するものは普通のスタイルなので割と簡単にアニメーションを作れると思います。

今回は以上です。
次回もよろしくお願いします。