こんにちは、リバティエンジニアのFUNA（フナ）です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- CSSアニメーションの使い方が知りたい
- CSSアニメーションのコピペで使えるサンプルが欲しい
今回は、CSSのみで実装することのできるアニメーションの方法を解説します。
サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
目次
CSSアニメーションとは
CSSアニメーションとは、「CSSのスタイル設定を別の設定へ遷移させることが可能」になるものです。
簡単に言うと、「要素を動かしてアニメーションをつけることができる」ということですね。
このCSSアニメーションは2つの要素で構成されています。
- アニメーションについて記述するスタイル
- アニメーションの始めと終わりのCSSスタイルを示すキーフレーム
@keyframes（キーフレーム）でアニメーションの流れを設定
キーフレーム（@keyframes）ではアニメーションをする要素の外見（形状）などを設定します。
例えば、アニメーションが始まる時は高さ（height）を150pxにして、アニメーションが終わる時には高さ（height）を500pxには以下のように記述します。
@keyframes height-animation {
0% {
height: 150px;
}
100% {
height: 500px;
}
}上記のサンプルコードのように「0%はアニメーションの始点」「100%はアニメーションが終点」を表しています。
animationプロパティを設定
@keyframesで定義した動きと組み合わせて、時間やタイミングなどの設定をして要素に適用させるのが「animationプロパティ」です。
CSSアニメーションの流れ (シーケンス) を作成するには、その要素に「animationプロパティorサブプロパティ」を追加します。
| サブプロパティ名 | 説明 |
| animation-name | アニメーションのキーフレームを示す@keyframes「@規則の名前を指定」します。 |
| animation-duration | 1 回のアニメーションサイクルに要する時間の長さを設定します。 |
| animation-timing-function | アニメーションの進め方を設定します。 ここには加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表しています。 |
| animation-delay | 要素が読み込まれてから、アニメーションをスタートするまでの遅延時間を設定します。 |
| animation-iteration-count | アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには「infinite」を指定することで実現できます。 |
| animation-direction | アニメーションのシーケンス完了時に「逆方向にアニメーションして繰り返す」か、「始めの状態にリセットしてアニメーションを繰り返す」かを設定します。 |
| animation-fill-mode | アニメーションの実行前後に、指定したスタイルを適用するかどうかを設定します。 |
| animation-play-state | アニメーションを一時停止したり、再開させたりすることができます。 |
CSSアニメーションのサンプル
では、CSSアニメーションを実際に使ったサンプルをいくつか用意したので、参考にしてみてください。
【CSSアニメーション】要素が画面を横切るサンプル
pタグの要素にテキストを記述し、その要素が画面を横切るようなアニメーションを実装することができます。
See the Pen css-animation by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
【CSSアニメーション】イベントを利用したサンプル
アニメーションイベントを用いることでアニメーションを制御したり、アニメーション付随する情報を得ることができます。
イベントは「AnimationEventオブジェクト」に集められていて、アニメーションの「開始・終了・繰り返しの始まり」を検出することができます。
See the Pen css-animation-events by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
CSSアニメーションイベントの詳細
CSSアニメーションのイベントについて少し深掘りします。
大まかな実装の流れは下記の通りです。
- HTMLを作成
- CSSを追加
- アニメーションイベントのリスナーの追加
- イベントを受け取って処理する
順番にどのような処理をするのかみていきましょう。
HTMLを作成
まずはHTMLを作成しましょう。
この後にイベントを取得して出力する際に必要な構成です。
<h1 id="title">これはウィンドウを横切るテキストです。</h1> <p class="content">当ブログサイトを少し自己紹介します。FUNABLOGではIT系の情報やフリーランスに役立つ情報を発信しているサイトです。</p> <p>CSSアニメーションのイベントを使って<span>時間の経過で文字を出力</span>することもできます。</p> <ul id="output"> </ul>
CSSを追加
次に、アニメーションのCSSを記述します。
.slidein {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: 5;
animation-direction: alternate;
}
@keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
このアニメーションは3秒後に終わり、5回繰り返され、繰り返す際には逆方向へアニメーションを行います。
「@keyframes」内では、要素が画面を横切るアニメーションを追加するために、widthとmargin-leftを変化させています。
アニメーションイベントのリスナーの追加
アニメーションイベントを取得するために、JavaScriptでコードを記述します。
setup()関数を使うことで、アニメーションイベントのリスナーとなり、ファイルが読み込まれた時に最初に呼び出されることになります。
var element = document.getElementById("title");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);
element.className = "slidein";
イベントを受け取って処理する
送られたイベントは以下の「listener()関数」に送られます。
function listener(event) {
var l = document.createElement("li");
switch(event.type) {
case "animationstart":
l.innerHTML = "アニメーションが始まります。";
break;
case "animationend":
l.innerHTML = "アニメーションが始まってから" + event.elapsedTime + "秒後の表示です。";
break;
case "animationiteration":
l.innerHTML = "アニメーションが始まってから" + event.elapsedTime + "秒後の表示です。";
break;
}
document.getElementById("output").appendChild(l);
}
このサンプルコードでは、switch構文で「event.type」を判別し、それぞれの処理をしています。
ここで下記には注意してください。
- 最終の繰り返しの後にはanimationiterationイベントが発生しない
- でも、animationendイベントは発生する
【完成】CSSアニメーションイベント実行画面
上記の処理を全て記述し、少しだけデザインを整えたものの出力結果がこちらです。
See the Pen css-animation-events by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
【HTML/CSS】アニメーションまとめ
今回は、CSSアニメーションについて「@keyframesとanimationプロパティ」について解説しました。
複雑なアニメーションをJavaScriptを使わず、CSSだけで実装できるのは魅力的ですね。
CSSアニメーションができるだけでデザインの幅が大きく広がります。
ぜひ実際にコピペでもいいのでコーディングして、色々カスタマイズしながら試してみてください。