CSSでアニメーションを作成！ keyframesを使った実装方法の解説
2022.03.16
Web制作を進める中で、スライダーなどのアニメーションを実装したいと思うことは多いと思います。
しかし、JavaScriptの知識があまりない方、他の方法がないかと探している人も多いのではないでしょうか？ 実はCSSでアニメーションを実装することも可能です。CSSにはanimationプロパティが備わっているので、これを使えば簡単にアニメーションを実装できるのです。
今回はCSSでアニメーションを実装する方法について、解説していきます。
CSSでアニメーションを実装する
CSSでアニメーションを実装するには、animationプロパティとtransitionプロパティを使用します。
これらのうち、animationプロパティは、以下のようなアニメーションの作成に適しています。
- 自動再生するアニメーション
- 細かく変化するアニメーション
- ループするアニメーション
animationプロパティでは複雑なアニメーションもCSSだけで実装できるので、少しの作業をするだけで、思い通りの動きをさせられるという特徴があります。
一方のtransitionプロパティは、カーソルのhover(マウスオーバー)などで要素が表示されたり色がゆっくり変化したりといった、簡単なアニメーションの作成に適しています。ループができず、自動再生後は要素がもとに戻るので、animationプロパティほど使い勝手が良くありません。
異なる2種類のプロパティは、それぞれ適材適所で使用していきましょう。
CSSでアニメーションを実装するメリット
CSSでアニメーションを実装するメリットは、以下のとおりです。
- 学習にかける時間・費用が少なくて済む
- CSSだけを使うので、動作が軽い
- JavaScriptよりもコード量が少ないことがある
CSSを使用したアニメーションは、JavaScriptのような別のプログラミング言語を学習しなくても実装できるので、マークアップ初心者でも作成しやすくなっています。
簡単なアニメーションの実装であれば、JavaScriptよりも必要なコード量が少なくて済むことがあります。システム負荷も少ないので動作が軽いという特徴があり、Webサイトの表示速度アップにもつなげられます。
CSSでアニメーションを実装するデメリット
CSSでアニメーションを実装するデメリットは、以下のとおりです。
- 複雑なアニメーションの作成が難しいことがある
- アニメーションによってはコード量が多くなる
CSSのアニメーションは、JavaScriptを使用するアニメーションよりも、複雑な動作をさせにくいことがあります。
また、アニメーションによってはJavaScriptを使用した場合と変わらない量のコードを記述する必要があります。
そのため、必ずしも「複雑なアニメーションを少ないコード量で記述できる」とは限らないので、注意しましょう。
これらのデメリットを除くとanimationプロパティは、アニメーションを手軽に実装できる手段なので、積極的に活用していきましょう。
keyframesを使って動かしてみよう！
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-nameとは、animationで動作させる要素の名前のことで、ここで指定した名前を@keyframesの右側に記述し、動作を指定します。以下は記述例です。
.slide {
animation-name:vader;
}
アニメーションをさせたい要素にanimation-durationを記述する
続いて、アニメーションさせたい要素に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を指定する
@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を指定して動作の過程で要素の幅を変化させています。
CSSのanimationプロパティ一覧
animationプロパティは、複数のプロパティを一括で指定できるようになっています。指定できるプロパティとその意味は、以下のとおりです。
animation-name
アニメーションで動作させる要素の名前を指定します。
.animation {
animation-name:vader;
}
animation-duration
アニメーションの動作時間を指定します。sとは秒の意味であり、msで指定すると、ミリ秒単位で指定できます。
.animation {
animation-name:vader;
animation-duration: 5s;
}
animation-timing-function
アニメーションの動きの内容を指定します。例えば一定のスピードで動作する、始めは速く動いて終わりをゆっくりにするなどが指定できます。
- ease :始まりと終わりをゆっくりにする（初期値）
- linear:一定の速度
- ease-in:ゆっくり開始
- ease-out:ゆっくり終了
- ease-in-out:ゆっくり開始・ゆっくり終了
- cubic-bezier(数値, 数値, 数値, 数値) :タイミングごとの動きを数値で指定できる
.animation {
animation-name:vader;
animation-duration: 5s;
animation- timing-function:ease-in-out;
}
animation-delay
アニメーションが始まるまでの時間を指定できます。こちらもanimation-durationと同じく秒数で指定します。
.animation {
animation-name:vader;
animation-duration: 5s;
animation-delay:10s;
}
animation-iteration-count
アニメーションを繰り返す回数の指定ができます。
.animation {
animation-name:vader;
animation-duration: 5s;
animation-iteration-count:6;
}
animation-direction
繰り返しに応じてアニメーションの向きを変更できます。
- normal:初期指定の方向で繰り返す
- alternate:奇数で初期方向、偶数ではその逆方向
.animation {
animation-name:vader;
animation-duration: 5s;
animation-direction:alternate;
}
animation-fill-mode
アニメーション開始前と開始後の状態を指定できます。
- none:適応させない
- forwards:終了時に元に戻らない
- backwards:終了時に元に戻る
- both: forwardsとbackwardsがともに適応される
.animation {
animation-name:vader;
animation-duration: 5s;
animation-fill-mode:both;
}
animation-play-state
アニメーションの再生・停止をコントロールできます。
- running:アニメーションの再生
- paused:アニメーションの停止
.animation {
animation-name:vader;
animation-duration: 5s;
animation-play-state:running;
}
animationプロパティを使った応用例
animationプロパティを使った応用例をこちらの記事で解説しております。
まとめ
CSSのanimationプロパティを使えば、CSSでアニメーションの実装ができます。
@keyframesとanimationプロパティの設定方法を知れば、たいていのアニメーションは実装できるので、まずはやり方を学んで実際にアニメーションを実装してみましょう。
関連
Webサイト制作Web開発
Webディレクション
Webサイト制作Web開発
