お知らせ（簡単！CSSアニメーション）｜YORIYORK｜栃木県佐野市

今回はWEBサイトを装飾するアニメーションについてご紹介します。

最近のホームページに動きが多いなと感じたことはありませんか？
それもそのはず！
実は簡単にアニメーションを実装できるようになったのです。
昔は「JavaScript」や「Flash」でおこなっていましたが、CSS3」になってからは「CSS」だけで実現できるようになり、WEBサイトに動きをつけるハードルが下がりました。
実際にどうやって実装するのか、サンプルを見ながらご説明いたします。

CSSアニメーションの種類

実はCSSアニメーションには２種類あり、それぞれ要素に対する作用が異なります。

①Transition

変化するまでの時間を指定することができます。
分かりやすい例をあげると、ボタンや画像にマウスカーソルを合わせた時、その部分が透明になるような設定の時に用いられます。

transitionプロパティ一覧
・transition-property
変化を適用するプロパティを指定できます。

例えばクラスtestの文字色を変えたい場合は、

となります。

・transition-duration
（トランジション・デュレーション ）
transitionの実行にかかる時間を指定します。

値は、秒数またはミリ秒数で指定します。
単位は「s」または「ms」になります。

変化のタイミング・進行割合を指定できます。
・ease（初期値）
・linear（一定）
・ease-in（ゆっくり始まる）
・ease-out（ゆっくり終わる）
・ease-in-out（ゆっくり始まってゆっくり終わる）
・cubic-bezier()（カスタム）
こちらは「ベジェ曲線」という、ベクターを扱う際に使用するもので設定されています。
状況に応じて使い分けするようなかたちです。

・transition-deley
変化のタイミングをずらすことができます。
値は、秒数またはミリ秒数で指定します。
単位は「s」または「ms」になります。
ショートハンドは、

の順番で並べます。

②animation(@keyframes)

こちらはアニメーションを設定するプロパティです。
「アニメーションの設定」をするプロパティと、開始から終了までの「状態を記述」する@keyframesがあります。

「animation」
・animation-name
アニメーションを定義します。
ここで設定した名前と＠keyframesが連動します。

・animation-duration
1回のアニメーションの実行にかかる時間を指定します。
値は、秒数またはミリ秒数で指定します。
単位は「s」または「ms」になります。

・animation-timing-function
変化のタイミング・進行割合を指定できます。
こちらは「transtion」で説明したものと同様の値を使用できます。

・animation-delay
アニメーションの開始タイミングをずらすことができます。
値は、秒数またはミリ秒数で指定します。
単位は「s」または「ms」になります。

・animation-iteration-count
アニメーションを繰り返す回数を指定できます。
無限に繰り返すには 以下のようにinfiniteを設定します。

・animation-direction
アニメーションが終了した時の再生の仕方を指定できます。
＜通常再生＞

＜逆再生＞

＜通常再生。もしループ設定の場合は、通常再生→逆再生→通常再生と繰り返されます。＞

＜通常再生。ループ設定の場合は、通常再生→逆再生→通常再生と繰り返されます。＞
＜逆再生。もしループ設定の場合は、逆再生→通常再生→逆再生と繰り返されます。＞

＜逆再生。ループ設定の場合は、逆再生→通常再生→逆再生と繰り返されます。＞

・animation-fill-mode
アニメーションが終了した時点の状態を維持するかどうかを指定できます。
forwardsを指定することでアニメーションが終了した状態を維持できます。

・animation-play-state
アニメーションを再生中か一時停止か指定することができます。

一時停止

再生

「@keyframes」

animationで、設定値をもとにアニメーションを実行します。
0%から100%の中で、細かくプロパティを設定することができます。
または「from」と「to」でも大丈夫です。

もちろん、間の数値も設定できます。

サンプル

実際に作成したアニメーションをいくつかご紹介させていただきます。

ホバー

transitionでアニメーションを指定することで、マウスカーソルをボタンから外したときの動きも綺麗に制御できています。

テキストグラデーション

文字色の変化を＠keyframesで設定し、ループするようにしています。

最後に

CSSアニメーションについてお分かりいただけましたでしょうか。
弊社ではアニメーションのサンプルページをご用意しています。
先ほどご紹介したのは、サンプルページに載っているアニメーションをを「GIFアニメーション」に変換したものです。

アニメーションのサンプルページはこちら
https://yori-york.co.jp/anime/
ご参考にしていただければ幸いです。

Author:admin｜Category:LABO（研究）