posted on 2019.1.22

WEBプログラミング, WEB初心者, WEB制作

webサイト上で動きのあるコンテンツを制作するには、一時代前であれば、Flash（Action Script）やJava Scriptが主流でしたが、こんにちでは簡単な動きであればCssだけで実装できるようになりました。WebKitが2007年頃にCSS animation、transition、transformをWebKitの機能として追加したことがcssでのアニメーションの始まりのようです。今回は、Cssでのアニメーションについて基本的な動きの実装を交えながら簡単な解説をしていきます。

cssでアニメーションを実装する為に必要なこと

cssでアニメーションを実装する上で覚えておくべき事項は大きく分けて以下の３つにります。

1. (1) css transition プロパティーによる変化のアニメーション及び時間の設定
2. (2) css transform プロパティーによる移動、回転などの設定
3. (3) css animation プロパティーと@keyframeによる繊細なアニメーションの設定

上記のなかで実際にフレーム単位のアニメーションを実装するのは（1）と（3）で、（2）は変化や変形の数値を設定するだけです。実際に実装例を示しながら簡単な解説をしていきたいと思います。

css アニメーションで実装する横移動

cssでアニメーションを実装する場合前項でも軽く触れましたが、（1）の　transition プロパティーで実装するか（3）の　amimation プロパティーで実装するかの二つの方法から選択することになります。ホバーをきっかけに始動する単純な横移動のアニメーションンをそれぞれで比較できるようなシンプルなコードをチョイスして書いてみます。それぞれで若干挙動が異なります。それを認識することは割りと大切なことだた思うので、頭でイメージできるようにしましょう。

transform プロパティーとtransition プロパティーで実装するcssアニメーション

ホバーをきっかけにtransform プロパティーで指定した位置までtransition プロパティーで指定した時間をかけて進み、ホバーをはずすと同じ時間をかけて最初の位置に戻ります。

animarion プロパティー、@keyframe、transform プロパティーで作るcssアニメーション

ホバーをきっかけに@keyframe内で設定したtransform プロパティーの位置までanimation プロパティーで指定した時間をかけて進み、@keyframe内で設定したアニメーションが終了すると元の位置に半ば強制的に戻ります。

cssで作る背景が切り替わるアニメーション。

次にナビゲーションなどで使われる背景が切り替わるアニメーションを、transitionプロパティー、animationプロパティーのそれぞれを使用して実装し、比較してみます。

transitionを使用した背景アニメーション

hoverをきっかけに背景が広がり、hoverが外れると元に戻ります。横移動のところで確認したとおり、transitionでのアニメーションの場合、帰りもアニメーションとして動作します。

animationプロパティーを使用した背景アニメーション

animationプロパティーの場合横移動で確認したように、帰りはアニメーションとして動作しない為、二つの@keyframeアニメーションを用意してhoverとそれ以外に分けて実装する必要がでてきます。

単純な見た目では同じように動いているように見えますが、animationプロパティーでの実装はまず読み込み時にも@keyframeアニメーションを拾ってしまいます。animation-direction: reverse;などいろいろなプロパティーや、hoverとactive、beforeとafterなどの擬似要素を使用したりなどして改善を試みましたがうまくいきませんでした。また、animationプロパティーの方は往復の動作にanimation-timing-functionを使って調整した方がより美しさを出せると思います。背景を動かすアニメーションに関しては、個人的にはtransitionプロパティーの方に分があるように感じますが、個人の好みなので皆さんにお任せしたいと思います。

transition関連のプロパティー簡易解説【初心者向け】

transitionとは直訳すると「変化」や「変遷」などの意味を持ち、css transitionは、対象が変化する際のアニメーションの速度や状態を操作する手段を提供します。この記事で使用したプロパティーを中心にtrasition関連のプロパティーをリファレンス的に簡単にまとめておきたいと思います。

transition-propertyプロパティー

cssのどの要素（プロパティー）にtrasition効果を適用するかを指定します。

-　値　-

all	変化を適用できるプロパティすべてが変化する（初期値）
none	どのプロパティも変化しない
プロパティ名	変化させるプロパティ名のリストをカンマ（ , ）区切りで指定

-　例　-

allを指定するとwidthもheightもtrasitionが適用され3秒かけて変化します。

widthとbackgroundに値を設定します。heightにはtransitionが適用されません。

transition-durationプロパティー

アニメーションが完了するまでの時間を秒又はミリ秒で指定します。単位は秒（second）

-　値　-

時間	変化に必要な時間の指定。初期値は0。単位は秒（second）。

-　例　-

transition-timing-function プロパティー

transition-durationで指定した時間内での変化の量を指定します。

-　値　-

linear	時間に比例して、一定の割合で値が増加。
ease	開始時と終了時は緩やかに変化。初期値。
ease-in	変化の開始付近の動きを緩やかにします。
ease-out	変化の終了付近の動きを緩やかにします。
ease-in-out	開始時と終了時ともにeaseよりさらに緩やかに変化します。

-　例　-

transition-delayプロパティー

transitionアニメーションの始まるタイミングを遅らせます。

-　値　-

時間	何秒後にアニメーションを始めるかを指定します。初期値は0。単位は秒（second）でミリ秒まで指定できます。

-　例　-

transitionプロパティー

transitionプロパティは、いままで確認してきたtransition-property、transition-duration、transition-timing-function、transition-delay を一括で指定するためのプロパティです。

-　値　-

各プロパティーの値	[transition-property] [transition-duration] [transition-timing-function] [transition-delay] の順で指定。

-　例　-

@keyframesとanimationプロパティー簡易解説【初心者向け】

この記事の内容に沿う程度に@keyframeとanimationプロパティーについてまとめておきます。

@keyframesについて

@keyframesはアニメーションの流れに沿って複数のスタイルを定義することによって、一連のCSSアニメーションの中間ステップを制御できます。これにより、アニメーションの中間ステップをtransitionプロパティーよりも詳細に制御できます。

-　例　-

hoverをきっかけに2段階でアニメーションします。

animation-nameプロパティー

-　値　-

none	キーフレームがないことを示す特別なキーワード。アニメーションを非アクティブにするために使用できます。
csutom-indent	@keframesで記述したアニメーションを識別する名前です。大文字小文字の区別がない英文字a からz、数字0から9、アンダースコア(_)、ダッシュ (-)が使用できます。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子はnone,unset,initial,inheritは使用でいません。

-　例　-

animation-durationプロパティー

1回のアニメーションに要する時間の長さを指定するためのプロパティー。

-　値　-

時間（time）	1回のアニメーションの周期の所要時間。秒(s)またはミリ秒(ms)で指定することができ、単位は必須です。値は正の数か0でなければならず、負の数は無効であり、指定が無視されます。0sの値は、既定値ですが、アニメーションを実行しないことを意味します。

-　例　-

animation-timing-functionプロパティー

アニメーションの時間ごとの変化に対して、加速、減速など変化の量を指定するためのプロパティー。あらかじめ決められた関数を値として指定するか、cubic-bezier関数でカスタムした値を指定します。

-　値　-

linear	時間に比例して、一定の割合で値が増加。
ease	開始時と終了時は緩やかに変化。初期値。
ease-in	変化の開始付近の動きを緩やかにします。
ease-out	変化の終了付近の動きを緩やかにします。
ease-in-out	開始時と終了時ともにeaseよりさらに緩やかに変化します。

-　例　-

animation-delayプロパティー

@keyframesで設定したcssアニメーションの始動に対して前後にオフセットを指定するプロパティー。

-　値　-

時間（time）	アニメーションが要素の開始からのオフセット時間を設定。単位は秒 (s) またはミリ秒 (ms) のどちらかで指定でき、初期値は0s。正の値を指定した場合、cssアニメーションの開始を遅延します。負の値を指定した場合は、@keyframesで設定したアニメーションが途中から始まります。

-　例　-

animation-iteration-countプロパティー

cssアニメーションを繰り返す回数を指定する為のプロパティーです。

-　値　-

infinite	@keyframesに記述したアニメーションが無限に繰り返されます。
数値（number）	整数または小数部分のある数値。アニメーション用に補間可能。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられたtiming functionで決められます。

-　例　-

animation-directionプロパティー

アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定する為のプロパティーです。

-　値　-

normal	cssアニメーションを毎回順方向に再生します。初期値。
reverse	cssアニメーションを毎回逆方向に再生します。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の ease-in が ease-out になります。
alternate	cssアニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
alternate-reverse	アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。

-　例　-

animationプロパティー

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の各プロパティーを一括指定する為のプロパティーです。

-　値　-

各プロパティーの値	animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state各プロパティーの値を必要に応じて指定

-　例　-

cssで実装するアニメーションまとめ

いろいろ書いてきた中で簡単におさらいすると、cssでのアニメーションを考える時、transitionとanimationの二つのプロパティーがあり、それぞれで挙動も異なり、実装方法も違うということです。どちらにも向き不向き、良し悪しはあるので、ccsでのアニメーションを考える時、最善を取れるようにしておきたいですね。それではまた。