最新コラム
-
-
-
-
-
Webサイト制作Web開発
【shopify】テーマをカスタマイズするためのLiquidの書き方
-
Webサイト制作Webデザイン
Webデザインの初心者必見!Webデザインの勉強方法を徹底解説
Web制作を進める中で、スライダーなどのアニメーションを実装したいと思うことは多いと思います。
しかし、JavaScriptの知識があまりない方、他の方法がないかと探している人も多いのではないでしょうか? 実はCSSでアニメーションを実装することも可能です。CSSにはanimationプロパティが備わっているので、これを使えば簡単にアニメーションを実装できるのです。
今回はCSSでアニメーションを実装する方法について、解説していきます。
CSSでアニメーションを実装するには、animationプロパティとtransitionプロパティを使用します。
これらのうち、animationプロパティは、以下のようなアニメーションの作成に適しています。
animationプロパティでは複雑なアニメーションもCSSだけで実装できるので、少しの作業をするだけで、思い通りの動きをさせられるという特徴があります。
一方のtransitionプロパティは、カーソルのhover(マウスオーバー)などで要素が表示されたり色がゆっくり変化したりといった、簡単なアニメーションの作成に適しています。ループができず、自動再生後は要素がもとに戻るので、animationプロパティほど使い勝手が良くありません。
異なる2種類のプロパティは、それぞれ適材適所で使用していきましょう。
CSSでアニメーションを実装するメリットは、以下のとおりです。
CSSを使用したアニメーションは、JavaScriptのような別のプログラミング言語を学習しなくても実装できるので、マークアップ初心者でも作成しやすくなっています。
簡単なアニメーションの実装であれば、JavaScriptよりも必要なコード量が少なくて済むことがあります。システム負荷も少ないので動作が軽いという特徴があり、Webサイトの表示速度アップにもつなげられます。
CSSでアニメーションを実装するデメリットは、以下のとおりです。
CSSのアニメーションは、JavaScriptを使用するアニメーションよりも、複雑な動作をさせにくいことがあります。
また、アニメーションによってはJavaScriptを使用した場合と変わらない量のコードを記述する必要があります。
そのため、必ずしも「複雑なアニメーションを少ないコード量で記述できる」とは限らないので、注意しましょう。
これらのデメリットを除くとanimationプロパティは、アニメーションを手軽に実装できる手段なので、積極的に活用していきましょう。
sample
animationプロパティを使用したCSSアニメーションは、@keyframesを使って実装します。@keyframesはanimationプロパティの動きの変化を指定するもので、シンプルな動作から複雑な動作まで指定することが可能です。
以下では、CSSでアニメーションを実装する、具体的な手順について解説していきます。
CSSのアニメーションを実装するときは、以下のようなコードになります。
/*--@keyframes--*/ @keyframes アニメーション名 { 0% { 値; } 100% { 値; } } 要素 { animation-name: アニメーション名; animation-duration: 時間(値); }
アニメーション名やプロパティ、時間などは任意で変更してください。上記テンプレートでは、アニメーション開始時と終了時の動きを指定するようになっています。そのため、例えば途中の動きを指定したい場合は、以下のように記述します。
/*--@keyframes--*/ @keyframes アニメーション名 { 0% { 値; } 30% { 値; } 50% { 値; } 80% { 値; } 100% { 値; } }
動作させたい要素にはanimation-nameを記述します。animation-nameとは、animationで動作させる要素の名前のことで、ここで指定した名前を@keyframesの右側に記述し、動作を指定します。以下は記述例です。
.slide { animation-name:vader; }
続いて、アニメーションさせたい要素にanimation-durationを記述します。animation-durationとは、アニメーションの開始・終了までにかかる時間を指定するプロパティです。この指定がないと自動的に0秒として処理され、アニメーションが動作しません。
.animation { animation-name:vader; animation-duration:10s; }
上記の例を使用してアニメーションを実装すると、以下の記述になります。
/*--@keyframes--*/ @keyframes vader { 0% { width:0%; } 30% { width:50%; } 50% { width:35%; } 80% { width:70%; } 100% { width:100%; } } .animation { animation-name:vader; animation-duration: 10s; }
上記の例では、animationクラスの動作させる要素をvaderという名前に指定し、その動作時間を10秒に設定しています。アニメーション動作の過程でwidthを指定し、要素の幅を変化させています。
@keyframesでのアニメーションの指定方法がおわかりになったでしょうか。
animationプロパティは1つの要素だけではなく、複数の要素を指定することもできます。複数の要素を同時に指定するには、各プロパティの値をカンマで区切って記述します。
/*--@keyframes--*/ @keyframes vader { 0% { width:0%; } 30% { width:50%; } 50% { width:35%; } 80% { width:70%; } 100% { width:100%; } } @keyframes luke { 0% { width:0%; } 20% { width:30%; } 40% { width:50%; } 60% { width:40%; } 80% { width:70%; } 100% { width:100%; } } .animation { vader 10s, luke 15s; }
上記の例では、animationクラスの@ketframesを2つ用意し、動作させる要素をvaderとlukeという名前に指定しています。その動作時間をそれぞれ10秒と15秒に設定し、それぞれにwidthを指定して動作の過程で要素の幅を変化させています。
animationプロパティは、複数のプロパティを一括で指定できるようになっています。指定できるプロパティとその意味は、以下のとおりです。
アニメーションで動作させる要素の名前を指定します。
.animation { animation-name:vader; }
アニメーションの動作時間を指定します。sとは秒の意味であり、msで指定すると、ミリ秒単位で指定できます。
.animation { animation-name:vader; animation-duration: 5s; }
アニメーションの動きの内容を指定します。例えば一定のスピードで動作する、始めは速く動いて終わりをゆっくりにするなどが指定できます。
.animation { animation-name:vader; animation-duration: 5s; animation- timing-function:ease-in-out; }
アニメーションが始まるまでの時間を指定できます。こちらもanimation-durationと同じく秒数で指定します。
.animation { animation-name:vader; animation-duration: 5s; animation-delay:10s; }
アニメーションを繰り返す回数の指定ができます。
.animation { animation-name:vader; animation-duration: 5s; animation-iteration-count:6; }
繰り返しに応じてアニメーションの向きを変更できます。
.animation { animation-name:vader; animation-duration: 5s; animation-direction:alternate; }
アニメーション開始前と開始後の状態を指定できます。
.animation { animation-name:vader; animation-duration: 5s; animation-fill-mode:both; }
アニメーションの再生・停止をコントロールできます。
.animation { animation-name:vader; animation-duration: 5s; animation-play-state:running; }
animationプロパティを使った応用例をこちらの記事で解説しております。
CSSのanimationプロパティを使えば、CSSでアニメーションの実装ができます。
@keyframesとanimationプロパティの設定方法を知れば、たいていのアニメーションは実装できるので、まずはやり方を学んで実際にアニメーションを実装してみましょう。