CSSだけで出来るアニメーションの仕組みを解説します。

こんにちは朱夏です。

今回は、CSSだけで出来るアニメーションについて書いていきます。

朱夏

動きのあるサイトを作ってみたい。

でもJavaScriptは難しくてまだ使えないんだよね・・・

こんなことを考えている人向けになります。
CSSだけでもかなり色々なアニメーションが実装できる事を知っていただければと思います。

それではいってみましょう。

[もくじ]
実装方法
animationプロパティ解説
疑似クラス解説
あとがき

実装方法

実装方法は2つです。

animationプロパティを使用する方法
疑似クラスを使用する方法

順番に解説します。

1.animationプロパティを使用する方法

こちらの実装方法の場合、基本的に自動で動作します。
繰返し自動で動いていたり、読み込まれた直後に一度だけ自動的に動く場合などに使われます。

2.疑似クラスを使用する方法

こちらを使用する場合、マウスカーソルを載せたり、クリックした場合など、いくつかの動作をトリガーにアニメーションさせたい場合に使用します。

ページ読み込み後、自動で動くものは1を、ユーザーのアクションをトリガーに動くものは2を使って実装するのが一般的です。
パララックスサイトによくあるスクロールに合わせてフェードインするようなものは、JavaScriptも使用する事になります。

animationプロパティ解説

ではまず、animationプロパティを使って実装する場合の方法について詳しく解説していきたいと思います。
先ずはコードを見ていただきましょう。

HTML

<div class="box1"></div>

1	<div class="box1"></div>

サンプルで四角い箱を1つ作成するだけなので1行で終わりです。

CSS

.box1 {
    opacity: 0;
    width: 100px;
    height: 100px;
    background-color: #8282ff;
    /* アニメーション:名前 動作時間 タイミング 開始遅延 繰返し 反転再生設定 */
    animation: trans1 3s ease 0.5s infinite normal;
}

@keyframes trans1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.box1 {

opacity: 0;

width: 100px;

height: 100px;

background-color: #8282ff;

/* アニメーション:名前動作時間タイミング開始遅延繰返し反転再生設定 */

animation: trans1 3s ease 0.5s infinite normal;

}

@keyframes trans1 {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

CSSでは、最初にclass=”box1″にスタイルを付与しています。
上から順に以下です。

不透明度:0
横幅:100px
縦幅:100px
背景色:#8282ff
コメントアウト(アニメーションの説明)
アニメーションの設定

コメントアウトにある様に、animationプロパティでは様々な設定をしています。
順番に解説していきます。

名前

アニメーションの処理に名前を付けています。
この名前をキーにしてアニメーションの処理を書いていきます。

動作時間

1回の動作にかかる時間を指定します。
アニメーションは始まりから終わり(0%～100%)で1回の動作になるので、そこにかかるトータルの時間を指定することになります。

タイミング

これは、動作中のどのタイミングにどのくらい変化しているかを指定するものです。
サンプルで指定している「ease」は、始まりと終わりが少しゆっくりになる設定です。
ease-in(ゆっくり始まる)やease-out(ゆっくり終わる)などのほか、数値で指定する方法もあります。

前回タイピングアニメーションの記事で紹介したsteps(n)もタイミング設定の1つです。

詳しくはこちらを参考にしてください。

開始遅延

動作開始前に動かずに待っている時間です。
ここで動作を開始するタイミングをずらす事が出来ます。

繰返し

繰り返し再生するのかを設定します。
数値で回数を設定するか、infinitで無限に繰り返すかの2択になります。

反転再生設定

繰返し再生する場合、偶数回目を逆再生にするかを指定できます。
これは実行結果を見てもらった方が理解が早そうなのでいかに貼ります。

normal

alternate

次に、アニメーション部分を解説していきます。

@keyframes

アニメーションの動作設定をする時の宣言の様なものです。
基本的な書き方としては以下のようになります。

@keyframes 名前 {0%{初期状態スタイル}100%{最終状態スタイル}}
もしくは、
@keyframes 名前 {from{初期状態スタイル}to{最終状態スタイル}}

今回は不透明度を0～1へ設定して、フェードインする様に設定しています。

疑似クラス解説

疑似クラスを指定してアニメーションさせる方法について解説していきます。
この方法は主にマウスホバーなどで動作するアニメーションを作る事が出来ます。

こちらもコードを貼っておきます。
HTMLは同じものを使っているのでCSSのみです。

.box1 {
    margin-bottom: 30px;
    width: 100px;
    height: 100px;
    background-color: #8282ff;
    transition-duration: 1s;
}

.box1:hover {
    background-color: #ff8282;
}

.box1 {

margin-bottom: 30px;

width: 100px;

height: 100px;

background-color: #8282ff;

transition-duration: 1s;

}

.box1:hover {

background-color: #ff8282;

}

実行結果はこちら。
マウスカーソルを重ねると色が変わります。

疑似クラス.box:hoverでマウスホバー時の処理を書いています。
アニメーションで使用する疑似クラスにはもう一つactiveがあります。
こちらはクリックをトリガーにする場合に使います。
この動作の特徴としては、「クリックで推し続けている間は変化する」ということです。
一度クリックしたら自動で開始されるアニメーションを作ることは出来ない様です。残念。

実行サンプルはこちら。