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

CSS
スポンサーリンク

こんにちは朱夏です。

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

朱夏
朱夏

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

 

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

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

 

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

 

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

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

 

  1. アニメーションさせたい対象を準備
  2. 要素に「animation」プロパティを設定
  3. 「@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;

 

 

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

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

 

 

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

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

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

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

 

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

@keyframes anime1名前 { 0% {~変更前の状態~} 100% {~変更後の状態~}}

 

 

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

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

 

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

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

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

 

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

 

 

あとがき

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

今回のまとめはこちら。

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

 

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

 

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

 

タイトルとURLをコピーしました