簡単!CSSアニメーション簡単!CSSアニメーション2019.8.1今回はWEBサイトを装飾するアニメーションについてご紹介します。最近のホームページに動きが多いなと感じたことはありませんか?それもそのはず!実は簡単にアニメーションを実装できるようになったのです。昔は「JavaScript」や「Flash」でおこなっていましたが、CSS3」になってからは「CSS」だけで実現できるようになり、WEBサイトに動きをつけるハードルが下がりました。実際にどうやって実装するのか、サンプルを見ながらご説明いたします。実はCSSアニメーションには2種類あり、それぞれ要素に対する作用が異なります。1Transition変化するまでの時間を指定することができます。分かりやすい例をあげると、ボタンや画像にマウスカーソルを合わせた時、その部分が透明になるような設定の時に用いられます。・transition-property変化を適用するプロパティを指定できます。)transitionの実行にかかる時間を指定します。}値は、秒数またはミリ秒数で指定します。単位は「s」または「ms」になります。・transition-timing-function変化のタイミング・進行割合を指定できます。・ease(初期値)・linear(一定)・ease-in(ゆっくり始まる)・ease-out(ゆっくり終わる)・ease-in-out(ゆっくり始まってゆっくり終わる)・cubic-bezier()(カスタム)こちらは「ベジェ曲線」という、ベクターを扱う際に使用するもので設定されています。状況に応じて使い分けするようなかたちです。・transition-deley変化のタイミングをずらすことができます。値は、秒数またはミリ秒数で指定します。単位は「s」または「ms」になります。transition-deleyの順番で並べます。2animation(@keyframes)こちらはアニメーションを設定するプロパティです。「アニメーションの設定」をするプロパティと、開始から終了までの「状態を記述」する@keyframesがあります。・animation-nameアニメーションを定義します。ここで設定した名前と@keyframesが連動します。値;・animation-duration1回のアニメーションの実行にかかる時間を指定します。値は、秒数またはミリ秒数で指定します。単位は「s」または「ms」になります。値;・animation-timing-function変化のタイミング・進行割合を指定できます。こちらは「transtion」で説明したものと同様の値を使用できます。・animation-delayアニメーションの開始タイミングをずらすことができます。値は、秒数またはミリ秒数で指定します。単位は「s」または「ms」になります。・animation-iteration-countアニメーションを繰り返す回数を指定できます。以下のようにinfiniteを設定します。infinite;・animation-directionアニメーションが終了した時の再生の仕方を指定できます。reverse;<通常再生。alternate;<通常再生。