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

こんにちは朱夏です。

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

朱夏

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

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

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

[もくじ]
アニメーションを作るための5つのステップ
1.アニメーションさせたい対象を準備
2.要素に「animation」プロパティを設定
3.「@keyframes」でアニメーションを設定
あとがき

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

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

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

基本的な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」プロパティの書き方は以下の様な感じです。

animation: anime1名前 3s時間 ease進行割合 1s遅延 infinite繰返し回数 alternate繰返し方法;

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

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

/* アニメーションの名前。@keyframesとの紐付けで使用する。 */
animation-name: anime1;

/* 動作にかかる時間を指定。 */
animation-duration: 3s;

/* 進行割合を指定。ゆっくり動き出して加速するなどを指定できる。 */
animation-timing-function: ease;

/* 動作開始までの待ち時間。 */
animation-delay: 1s;

/* 繰返し回数を指定。infiniteは無限に繰り返す。 */
animation-iteration-count: infinite;

/* 繰返し方法を指定。通常の繰り返しか、偶数回を逆再生するかを指定できる。 */
animation-direction: alternate;

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