お知らせ(簡単!CSSアニメーション)|YORIYORK|栃木県佐野市

お知らせ

news

簡単!CSSアニメーション

2019.8.1

簡単!cssアニメーション_アイキャッチ
今回はWEBサイトを装飾するアニメーションについてご紹介します。

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

CSSアニメーションの種類

cssアニメーション_フェードイン
実はCSSアニメーションには2種類あり、それぞれ要素に対する作用が異なります。

①Transition

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

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

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

となります。

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

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

・transition-timing-function

変化のタイミング・進行割合を指定できます。
・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」でも大丈夫です。

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

サンプル

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

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

テキストグラデーション
カラーグラデーション_サンプル

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

最後に

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

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

Author:admin|Category:WEBチーム

\ お気軽に一度ご相談ください! /

お問い合わせ•ご相談はこちら
求人情報
PAGE TOP