ywork2020.com

Title

要素にアニメーション効果をつける

目次 (INDEX)

animationとは

ここで説明するanimation とは次の語句からなるCSSのプロパティです。
animation
読み: アニメーション
意味: 動画、アニメーション

目次に戻る

animationプロパティの概要

このプロパティは、要素にアニメーション効果をつけることができます。

animationプロパティは下記のanimation系プロパティの値を一括で設定するための総合プロパティとなります。

CSSでアニメーションをさせたい場合には、animationプロパティの設定と@規則と呼ばれる @keyframes の定義が必要です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 このプロパティはanimation系プロパティの設定を一括指定できます。 複数の個別プロパティの値を一括で設定する場合には、各値を半角スペースで区切って指定します。 また、省略した個別プロパティの値は初期値が適用されます。

セレクター{
	animation: [Duration] [Timing-function] 
	[Delay] [Iteration-count] [Direction] 
	[Fill-mode] [Play-state] [Name];
}

この設定値の並びは必ずしも、こうである必要はありませんが、[Duration]と[Delay]は同じ単位を使って指定することから 必ず[Duration]を先に記述する必要があります。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使う要素はdiv要素です。 この要素に次の@keyframesを適用してアニメーションを見ていきます。 @keyframesもCSSと同じファイルやstyle要素内に記述すれば問題ありません。

@keyframes myLeft{
	0% {left: 0;}
	100% {left: 490px;}
}

初期値: 0s ease 0s 1 normal none running none

このプロパティの初期値は次のコードに記す個別プロパティの初期値です。

div{
	animation-duration: 0s
	animation-timing-function: ease
	animation-delay: 0s
	animation-iteration-count: 1
	animation-direction: normal
	animation-fill-mode: none
	animation-play-state: running
	animation-name: none
}
0% (from)
100% (to)
div

div{
	animation: 0s ease 0s 1 normal none running none;
}

結果はどうだったでしょうか。要素はアニメーションしないはずです。 その理由は、このプロパティでアニメーションを実行するために必須な値が初期値のままだからです。 次のセクションでは要素がアニメーションするために必ず設定しなければならない値を説明します。

目次に戻る

必須値: [Duration]と[Name]

このプロパティでアニメーションを実行する為には、アニメーションの開始から終了に掛かる時間と @keyframesの名前が必ず必要です。

アニメーションの時間を設定するためには構文の[Duration]に秒(s)、またはミリ秒(ms)の単位をつけた値を指定します。 これは、個別プロパティの animation-duration を設定していることになります。

また、アニメーションの名前は構文の[Name]に @keyframes の名前を指定します。 これは、個別プロパティの animation-name を設定していることになります。

このサンプルで使っている@keyframesの名前はmyLeftです。 ここでは、その@keyframesの名前を指定して2秒間のアニメーションを要素に設定してみます。

0% (from)
100% (to)
div

div{
	animation: 2s ease 0s 1 normal none running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s myLeft;
}

目次に戻る

[Timing-function]: アニメーション実行中の動作タイミング

この[Timing-function]の値は、アニメーション実行中の遷移スピードをコントロールすることができます。

これは、個別プロパティの animation-timing-function を設定していることになります。

ここではlinearというキーワード値を設定して、一定スピードでアニメーションが実行されるようにしました。 このセクションの終りに他のキーワード値や関数値について一覧で掲載しておきますので参考にしてください。

0% (from)
100% (to)
div

div{
	animation: 2s linear 0s 1 normal none running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s linear myLeft;
}

下記にtiming-functionに指定できるキーワード値と関数値を一覧表として掲載しておきます。

timing-function説明
[キーワード]
ease
初期値です。
アニメーションの最初と終わりは滑らかな動きになります。
cubic-bezier(0.25, 0.1, 0.25, 1.0)を指定した場合も同じ動きになります。
[キーワード]
linear
一定の速度でアニメーションが進行します。
cubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ動きになります。
[キーワード]
ease-in
始めはゆっくりアニメーションし終わりになるにつれて加速します。
cubic-bezier(0.42, 0, 1.0, 1.0)と同じ動きになります。
[キーワード]
ease-out
始まりの速度は速く徐々に減速しながらアニメーションします。
cubic-bezier(0, 0, 0.58, 1.0)と同じ動きになります。
[キーワード]
ease-in-out
最初と最後はゆっくりアニメーションし、中盤は加速します。
cubic-bezier(0.42, 0, 0.58, 1.0)と同じ動きになります。
[キーワード]
step-start
アニメーション開始時から終了の状態になります。
steps(1, jump-start)と同じ動きになります。
[キーワード]
step-end
アニメーションが終了するまでの時間はアニメーションはされずアニメーションの最後に終了の状態になります。
steps(1, jump-end)と同じ動きになります。
[関数]
cubic-bezier(p1, p2, p3, p4)
このタイミング関数は3次ベジェ曲線を定義します。
[関数]
steps( n, <jumpterm>)
ステップ関数または段階関数と言われコマ送りのようにステップさせることができます。 ステップ数を指定することで等間隔に区切ることができます。

nにはステップ数を指定します。

引数のキーワード<jumpterm>
  • jump-start: 分割された各アニメーションステップの最初の位置のアニメーションを表示します。 ただし、最初のステップは飛ばします。
  • jump-end: 分割された各アニメーションステップの終了の位置のアニメーションを表示します。 ただし、最後のステップは飛ばします。
  • jump-both: jump-startとjump-endの両方の特性を併せ持っています。 最初のステップと最後のステップを含まずに、それ以外のところで効果的にステップします。
  • jump-none: トランジション開始から完了まで均一にステップが行われます。

目次に戻る

[Delay]: アニメーションが開始されるまでの待機時間

この[Delay]はアニメーションが開始されるまでの待機時間を設定します。

アニメーション開始までの待機時間を設定するためには構文の[Delay]に秒(s)、またはミリ秒(ms)の単位をつけた値を指定します。 これは、個別プロパティの animation-delay を設定していることになります。

ここでは1秒間の待機時間を設定してみます。

0% (from)
100% (to)
div

div{
	animation: 2s ease 1s 1 normal none running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s 1s myLeft;
}

目次に戻る

[Iteration-count]: アニメーションの繰り返し回数の指定

この[Iteration-count]はアニメーション周期(0%~100%への遷移)の繰り返し回数を設定することができます。

これは、個別プロパティの animation-iteration-count を設定していることになります。

ここではアニメーション周期を1.3回に設定してみます。 小数点が付いた値を指定しているのでアニメーションは1回の完了と3割り進んだ時点で終了します。

0% (from)
100% (to)
div

div{
	animation: 2s ease 0s 1.3 normal none running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s 1.3 myLeft;
}

目次に戻る

[Direction] : アニメーションの再生方向の指定

この[Direction] はアニメーションの再生方向を設定することができます。

これは、個別プロパティの animation-direction を設定していることになります。

ここではreverseキーワードを使って逆再生でアニメーションをさせてみます。

0% (from)
100% (to)
div

div{
	animation: 2s ease 0s 1 reverse none running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s reverse myLeft;
}

下記にdirectionに指定できるキーワード値を一覧表として掲載しておきます。

direction説明
[キーワード]
normal
初期値です。
アニメーションを順方向から再生します。
[キーワード]
reverse
アニメーションを逆方向から再生します。
[キーワード]
alternate
アニメーションは順方向から再生が始まり、 アニメーションを繰り返し再生した場合に再生毎に再生方向が反転します。
[キーワード]
alternate-reverse
アニメーションは逆方向から再生が始まり、 アニメーションを繰り返し再生した場合に再生毎に再生方向が反転します。

目次に戻る

[Fill-mode] : アニメーション再生の前後のスタイル

この[Fill-mode] はアニメーション再生の前後のスタイルを設定することができます。

これは、個別プロパティの animation-fill-mode を設定していることになります。

ここではforwardsキーワードを使ってアニメーションが終了した時点で終了フレームを維持しています。

この設定における動作はanimation-directionとanimation-iteration-countの設定により異なる結果が生じます。 詳しくは animation-fill-mode のページを参考にしてください。

0% (from)
100% (to)
div

div{
	animation: 2s ease 0s 1 normal forwards running myLeft;
}
/*次の様に他の個別プロパティの設定を省略することも可能です。*/
div{
	animation: 2s forwards myLeft;
}

目次に戻る

[Play-state] : アニメーションの再生状態

この[Play-state] はアニメーション再生状態を設定します。 単純にいうと再生中のアニメーションを停止したり、逆に停止中のアニメーションを再生したりできます。

これは、個別プロパティの animation-play-state を設定していることになります。

ここでは疑似クラスの:hoverにpausedキーワードを使ってアニメーションが途中で停止するようにしてみます。 要素にマウスポインタが重なるとpausedの効果が適用されます。

div

div{
	animation: 2s ease 0s infinite normal none running myRotate;
}
div:hover{
	animation: 2s ease 0s infinite normal none paused myRotate;
}
@keyframes myRotate{
	0% {transform:rotateY(0);}
	100% {transform:rotateY(360deg);}
}

目次に戻る

グローバル値

animationプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の0s ease 0s 1 normal none running noneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{animation: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る