CSS 初めてのCSSアニメーション

2020-04-06

HTML / CSS / JavaScript を学んでいくと、おそらくいつかはアニメーションを取り入れる場面に出くわすと思います。今回は、その最初の一歩になるような記事になればと思い、まとめてみました。
アニメーション自体は、いろいろな方法で記載して、表現することはできますが、今回は‘CSS’に注目して、記載していきたいと思います。

CSSアニメーションを実現する２つの方法

CSSアニメーションを実現するには２つの記述の方法があり、CSSの記述方法は全く異なりますが、アニメーションの動作に対する大まかな違いも記載します。

■ transition ・・・ループしての動作は不可
transiton の解説はこちら
■ animation ・・・ループ動作は可、時間経過による変化をつけることも可
animation の解説はこちら

複雑な動きでなければ、どちらの記述をしても同じように表現をすることができますが、スマホなどのメニューボタンは‘transition’、スライドショーなどは‘animation’を使用する場合が多いかなと感じます。
では、下記に、それぞれの記述例を記載していきたいと思います。

transitionの記述

transitionは開始・終了時のプロパティを定義し、その変化をスムーズに表示します。

transition-property ・・・ アニメーションさせるプロパティを指定
transition-duration ・・・ 変化の開始から終了までの時間
transition-timing-function ・・・ 変化の仕方（イージング）
transition-delay ・・・ アニメーション開始までの遅延

上記をまとめて、記載する場合
transition: /* プロパティ名 | 時間 | 時間関数 | 遅延 */

transition-property ・・・アニメーションさせるプロパティを指定

transition-duration ・・・変化の開始から終了までの時間

transition-timing-function ・・・変化の仕方（イージング）

transition-delay ・・・アニメーション開始までの遅延

上記をまとめて、記載する場合

transition: /* プロパティ名 | 時間 | 時間関数 | 遅延 */

transitionの動作は、:hoverや:active、または、Javascriptで動作をさせるタイミングを設定するのが望ましいです。

transition の使用例

下記に、マウスオーバー時に動作する内容を記載します。

<style>
.sample-1{
	background: #000;
	transition: 0.8s linear 0.2s;
}
.sample-1:hover{
	background: #d00;
}
</style>
<div class="sample-1"></div>

<style>

.sample-1{

background: #000;

transition: 0.8s linear 0.2s;

}

.sample-1:hover{

background: #d00;

}

</style>

マウスオーバーをした際に、背景の色が変更するように指定してあります。変更後の動作を:hoverに対して、指定しておきます。変化させる時間関数については、‘linear’、‘ease’、‘ease-in’などがありますが、‘cubic-bezier’を用いて、細かく指定することもできます。これに関しては、以下のサイトにて、よくまとめられているので、ご参考までに。

イージング関数について

animationの記述

Animation は時間経過毎のプロパティの状態を指定でき、スムーズに表示します。時間毎の状態は@keyframesで定義し、animationで再生時間や再生回数などを指定していくことでアニメーションを実装することが出来ます。
@keyframesでCSSの@ルールに基づき記述します。

animation-name ・・・ @keyframesで定義した名前を指定
animation-duration ・・・ アニメーションにかかる時間
animation-timing-function ・・・ 変化の仕方（イージング）
animation-delay ・・・ アニメーション開始までの遅延
animation-iteration-count ・・・ アニメーションの繰り返し回数（数値かinfinite、初期値は1）
animation-direction ・・・ アニメーションの再生方向 *1
animation-fill-mode ・・・ アニメーション開始時・終了時 *2

上記をまとめて、記載する場合
animation: /* ここいに記述 */

@keyframes [任意の名前] {
	from {
		[ プロパティ ]: [ 値 ];
	},
	to {
		[ プロパティ ]: [ 値 ];
	}
}

animation-name ・・・ @keyframesで定義した名前を指定

animation-duration ・・・アニメーションにかかる時間

animation-timing-function ・・・変化の仕方（イージング）

animation-delay ・・・アニメーション開始までの遅延

animation-iteration-count ・・・アニメーションの繰り返し回数（数値かinfinite、初期値は1）

animation-direction ・・・アニメーションの再生方向 *1

animation-fill-mode ・・・アニメーション開始時・終了時 *2

上記をまとめて、記載する場合

animation: /* ここいに記述 */

@keyframes [任意の名前] {

from {

[ プロパティ ]: [ 値 ];

to {

[ プロパティ ]: [ 値 ];

}

補足として、

animation-direction
normal	アニメーションを順方向に再生
reverse	アニメーションを逆方向に再生
alternate	アニメーションの繰り返し回数が奇数の場合は順方向、偶数の場合は逆方向に再生
alternate-reverse	アニメーションの繰り返し回数が奇数の場合は逆方向、偶数の場合は順方向に再生

animation-fill-mode
none	再生中以外はキーフレームの指定は無効となります。
forwards	実行後最後のキーフレームの指定を保持します。
backwards	実行前に最初のキーフレームの指定が適用され、animation-delayの間保持します。
both	forwardsとbackwardsが両方適用されます。

また、@keyframesの指定方法については、［from/to］の他、％で細かく指定することもできます。

animation の使用例

transitionと同じような使用例を挙げます。

<style>
.sample-2{
	background: #000;
}
.sample-2:hover{
	animation: 2.0s bgcolor linear infinite;
}
@keyframes bgcolor{
	0% { background: #000;}
	30%{ background: #f00;}
	60%{ background: #00f;}
	100%{ background: #000;}
}
</style>
<div class="sample-2"></div>

<style>

.sample-2{

background: #000;

}

.sample-2:hover{

animation: 2.0s bgcolor linear infinite;

}

@keyframes bgcolor{

0% { background: #000;}

30%{ background: #f00;}

60%{ background: #00f;}

100%{ background: #000;}

}

</style>

上記の例では、マウスオーバー時にアニメーションが適用されるようになっていますが、<div>に対して指定することで、繰り返してアニメーションをさせることができます。また、@keyframesの設定で0%と100%を同じ内容しすることで、ループした際の動きがスムーズに見えるようになります。

備考

今回の例では、背景色の変更を例にしましたが、背景に画像やグラデーションを指定している場合、それらに対しては実行されません。というのも［background-image］に対しては、transitionやanimationは効かないからです。グラデーションに変化を付けたい場合は、擬似要素などを利用して、重ねて配置し、opacityで透過することで、擬似的にアニメーションのように見せる方法があります。