Animationとkeyframesを使うと洒落たアニメーションをcssで実現できます。動きのあるページを作ろう

by hauteteazedesigns pixabay

洒落たアニメーションを見ると、自分でもやってみたいと思いませんか？

始めは少し難しいですがアニメーションが作れると楽しいです。

自分のためにもアニメーションの作り方を整理してまとめてみました。

少し細かい内容まで記述しています。

CSSで目を引くアニメーションを作ることが出来るようになりますよ。

解説内容

1. Animationとkeyframesを使うと洒落たアニメーションをcssで実現できます。

2. Keyframesで細かくAnimationのスタイルをCSSに指定して動きを作る

3. Animationでkeyframesの動きにリズムを作る

4. 画像がゆっくり表示され切り替わるアニメーションをAnimationとkeyframesでコーディング

最後まで目を通してくださいね。

洒落たアニメーションをつくりましょう！

１．Animationとkeyframesを使うと洒落たアニメーションをcssで実現できます。

1-1. Animationとkeyframesを使ったアニメーションの例題

CSSで実現する例題のアニメーションがこちらです

See the Pen animation-base by Seiji Nakamura (@sjnkmr_777) on CodePen.

表示操作のやり方

＊画面上部の[HTML][CSS][Result]をクリックすると、プログラミングコードおよび結果が表示されます。

＊画面下部の [1×] [0.5×] [0.25×] を選択すると結果の表示倍率が変わります。

(1)各要素の時間的な動作：

消える⇒小さい丸⇒消える⇒中ぐらいの角のない四角⇒消える⇒大きい四角

　＊各要素の詳細の動きは、CSSにKeyframesで記述します。

(2)３つの要素の動き方：

並んだ３つの要素(divタグ)が１秒づつ遅れて表示される

　＊要素にAnimationをする宣言をして、Keyframesを呼び出します。

1-2. Animationとkeyframesの特徴

CSSに「animation」「@keyframes」を記述するだけで、スタイルを細かく指定できます。

そして、複雑なアニメーションを実現できます。

しかも、JavaScriptを使わずトリガがなくてもアニメーションが作れます。

1-3. アニメーションを作るAnimationとkeyframesの構成

アニメーションはCSS内に２種類の要素を記述することで構成します。

「@keyframes」:アニメーションの時間的な動作（スタイル）を定義します。
先頭、通過点、最後のCSSスタイルを示しています

「animation」:アニメーションの動き方＝スタイルの移り変わりを定義します

「animation」から「@keyframes」を参照することでアニメーションが動きます。

(1)Animationとkeyframesのオススメの記述方法

animationは一つづつ記述するのがオススメです。

Animationのスタイルをまとめて並べて記述する方法があます。
一見シンプルでわかりやすいように見えます。

しかし、Animationのスタイルの指定の順序の間違いや指定忘れなどの誤りが生じるやすくなります。

ひとつひとつのスタイルを確実に指定するのが賢明です。

CSSに記述する代表的な構成を下記します。

.class{ animation-****** }と@keyframes *****{ }は同じCSS内に記述します。

(2)Animationとkeyframesの簡易な記述方法

animationのスタイルをまとめて並べて一括指定する記述する方法があると説明しました。

書く順番など間違えやすくあまりオススメしません。

CSSにまとめて並べて記述する構成例を下記します。

animation:　sample-name 4s ease 1s infinite reverse both running slide-in;

@keyframes sample-name{
　省略
}

animation:　の横に記述するスタイルには順番（下記）が決められています。

必要なスタイルのみ記述すればよいのですが、そこにも決まりがあります。

記述する項目が少なく、一見簡単のように見えますが、間違えやすいという落とし穴がありますので注意して使ってください。

「animation:」の後に記述する順番

　①animation-name

　②animation-duration

　③animation-timinig-function

　④animation-delay

　⑤animation-iteration-count

　⑥animation-direction

　⑦animation-fill-mode

　⑧animation-play-state

＊animationの一括指定についてはこちらを参照ください。

1-4. Animationとkeyframesを使ったアニメーションのコーディング概要

例題のアニメーションを実際にCSSにコーディングした内容を書きます。

概要説明ですのでAnimationとkeyframesの使い方は十分わからないと思います。

次項 [ 2 ] に解説があります。
次項 [ 2 ] を読んでAnimationとkeyframesの理解を深めてください。

index.html

<div class="block">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

style.css

.block{
text-align: center; 　横軸中心に配置
}
.item {　itemのスタイル設定
display: inline-block;
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;　itemを丸で表示
transform: scale(0);　itemを零倍して消す
animation-name: kf-circle;　@keyframesの名前
animation-duration:15s;　１周期の時間
animation-timing-function:ease;　変化の形
animation-iteration-count:infinite;　繰り返し回数
animation-fill-mode:forwards;　終了する時のスタイル
}
.item2{
animation-delay:1s;　item1から１秒遅れて開始
}
.item3{
animation-delay:2s;　item1から２秒遅れて開始
}
@keyframes kf-circle {
0% {
transform: scale(0);　要素を零倍して消す
}
20% {
border-radius: 50%;　角を丸め真丸
transform: scale(0.5);　要素を0.5倍
}
40% {
transform: scale(0);　零倍して要素が消す
}
60% {
border-radius: 30%;　角を適度に丸めた四角
transform: scale(0.8);　要素を0.8倍
}
80% {
transform: scale(0);　零倍して要素が消す
}
100% {
border-radius: 0%;　角を丸めない真四角
transform: scale(1);　要素を1倍
} }

２．Keyframesで細かくAnimationのスタイルをCSSに指定して動きを作る

@keyframes内で、要素のアニメーションの時間的な動き（スタイル）を定義します。

「@keyframes内の動きは、パーセントの値が少ない内容から順番に処理される。」と説明しました。

0%：開始のスタイル

100%：最後のスタイル

0%～100%間：パーセントの値が増加するに従い順次スタイルが変わります。

例題では、（要素の倍率について）

同様な処理が丸や四角などの形についても、各パーセントで指定してあります。

@keyframesの詳細はこちらを参照ください。

３．Animationでkeyframesの動きにリズムを作る

次に、全体をアニメーションするやり方を整理します。

3-1. animationプロパティの種類

animationプロパティでは、@Keyframesで指定したアニメーションの動き方をコントロールできます。
ここでは、animationのリズムと表現しています。

「animation-name」は、「@keyframes」を参照するためには必須です。

他は、指定しなければ初期設定の値でアニメーションが動きます。

animation-name：
アニメーションのキーフレームの名前、初期値=none

animation-duration：
アニメーション1回に要する時間、初期値=0s

animation-timing-function：
アニメーションの変化を定義、初期値=ease

animation-delay：
アニメーションを始めるまでの遅れ時間、初期値=0s

animation-iteration-count：
アニメーションの繰り返し回数、初期値=1

animation-direction：
アニメーションを再生方向、初期値=normal

animation-fill-mode：
アニメーションの開始と終了時の状態を定義、初期値=none

animation-play-state：
アニメーションの一時停止と再開、初期値=running

3-2. animationプロパティ個別の解説

animation-name

@keyframes につけられる名前を指定します。

要素に適用される 1 つまたは複数のアニメーションを記述します。

例題では、

animation-duration

アニメーション1周期に要する時間。

単位は、s（秒）か、ms（ミリ秒）で指定します。負の値は無効です。

0の場合はアニメーションを実行しません。

例題では、

animation-timing-function

アニメーションが１周期の中でどのように変化するかを指定します。

アニメーションに対応する関数で開始点、最後の点、通過する２点の４点で変化の軌跡を定義しています。

よく使う関数を下に整理します。

ease：
アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。

linear：
等しい速度でアニメーションします。

ease-in：
プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。

ease-out：
アニメーションは速く始まり、速度を落としながら続きます。

ease-in-out：
プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。

例題では、

animation-delay

アニメーション開始のトリガから実際に動く始めるまでの時間。

単位は、s（秒）か、ms（ミリ秒）で指定します。

負の値の場合はすぐ動き始めます。アニメーションの途中の状態から動きます。

例題では、

animation-iteration-count

アニメーション開始から停止までにアニメーション周期が再生される回数を指定します。

数値：
アニメーションが繰り返される回数。小数点指定もでき、0.5は周期の半分を指定します。

infinite：
アニメーションを無制限に繰り返します。

例題では、

animation-direction

アニメーションを再生する順番=方向を順方向、逆方向、前後反転に指定します。

normal：
アニメーションを毎回順方向に再生します。
周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。

reverse：
アニメーションを毎回逆方向に再生します。
周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。
タイミング関数も逆になり、 ease-in が ease-out になります。

alternate：
アニメーションを初回は順方向始め、毎回反転させて動きます。

alternate-reverse：
アニメーションを初回は逆方向始め、毎回反転させて動きます。

例題では、

animation-fill-mode

cssアニメーション実行の前後に要素に適用するスタイルを指定します。

例えば、アニメーション終了時にイニシャルのスタイルに戻るのか、終了時のスタイルを保持するか。

none：
アニメーションが実行されていない時は、対象にスタイルを適用しません。
要素は適用されているその他の CSS 規則を使用して表示されます。
これが既定値です。

forwards：
アニメーション終了時に、対象要素はkeyframesで設定された最後に実行されたスタイルを保持します。

forwards：
アニメーション終了時に、対象要素はkeyframesで設定された最初に実行したスタイルを保持します。

both：
forwards と backwards の両方向の設定を適用します。

例題では、

animation-play-state

アニメーションの一時停止と実行再開を指定します。

トリガにより動作をコントロールします。

paused：
アニメーションを停止します。

running：
アニメーションを実行します。

cssアニメーションの詳細はこちらを参照ください。

４．画像がゆっくり表示され切り替わるアニメーションをAnimationとkeyframesでコーディング

See the Pen animation-image by Seiji Nakamura (@sjnkmr_777) on CodePen.

画像がゆっくり表示され切り替わるアニメーションを実際にコーディングします。

是非、自分でコーディングして理解を深めてください。

目標のアニメーション：

①「猫」「リス」「イルカ」画像が、フェードアウト・フェードインしながら切り替わり順番に表示される。

②表示される画像は、ゆっくりフォーカスされ拡大されていく。

index.html

style.css

.block {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: -1;
}

.item {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  animation-name: kf-example;
  animation-duration:15s;
  animation-timing-function:linear ;
  animation-delay:0;
  animation-iteration-count:infinite;
  animation-fill-mode:forwards;
}

.item1 {
   background-image: url(img1);
  }

.item2 {
  background-image: url(img2);
  animation-delay: 5s;
}

.item3 {
  background-image: url(img3);
  animation-delay: 10s;
}

@keyframes kf-example {
   0% {
     animation-timing-function: ease-in;
     opacity: 0;
  }
  10% {
     transform: scale(1.1);
     opacity: 1;
  }
  40% {
     transform: scale(1.2);
     animation-timing-function: ease-out;
      opacity: 1;
  }
  50% {
     transform: scale(1.3);
     opacity: 0;
  }
  100% {
     opacity: 0;
 }}

全体のアニメーション

３つの画像が、５秒の遅れを持ちkf-exampleのスタイルを表示する。

順番に異なる画像が表示される。

５．まとめ

animationとkeyframesを使って細かく指定できるアニメーションの方法を整理しました。

少し複雑ですがプロパティの指定のやり方を理解するとアニメーションが作れます。

transitionプロパティを使った簡易なアニメーションについてはこちらをご覧ください。

皆様もぜひ理解して活用してください。

＊最後まで読んでいただきありがとうございます。
　舌足らずで説明不足の所はお許しください。
　また、改良項目・修正項目がございましたらご指摘いただけたら幸いです。

Copyright – Seiji Nakamura, 2022 All Rights Reserved.