CSSのアニメーションについて、JavaScriptとの連携やSCSSのmixinなど

作業風景の写真、pixabayより
rawpixel / Pixabay

CSSでアニメーションをするための要素

transitionプロパティ

まず、ある要素の状態が遷移する(たとえばリンク色が変化する、背景色が変化するなど)の変化の間の時間や遷移の勢いをある程度コントロールする、という程度であれば、transitionプロパティで対応できます。
たとえば下のPenのように、:hover前と後でスタイルをそれぞれ設定して、その移り変わりについてはtransitionで設定するなど。

transitionプロパティに設定できる値は以下の通り。transitionプロパティはショートハンド、つまりいくつもの値を一気に設定するプロパティですので、それぞれを独立して設定するプロパティもあります

p{
transition: トランジションするプロパティ名 トランジションにかける時間 タイミング関数 トランジション開始までの遅延時間
}

タイミング関数により、トランジション(遷移)の勢いをコントロールできる。タイミング関数はデフォルトで名前が決まっているもののほか、ある程度使用者が設定できる関数(cubic-bezier)があるが、まあだいたいはデフォルト(ease ease-in ease-out ease-in-out linear step-start step-end)で事足りると思います。
なお、私は主にこのショートハンドプロパティで一括指定しています。時間の順番さえ覚えれば、あとは簡単ですし。

keyframes

transitionで扱いきれない場合はanimationsプロパティとkeyframesを使うことになります。
流れとしては、keyframesでアニメーションを定義して、セレクタでDOM要素にanimationsプロパティを適用し、animationsプロパティで定義したアニメーションを適応させるという感じ。
設定の仕方は、名前を付けて、アニメーションとして変化するタイミングに変化するプロパティとその値を指定する感じです。
例えば、単純なフェードインだと、

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

のように書けます。上のコードの0%や100%の部分を増やすと、変化の基準となるフレームを増やすことができます。
@keyframes アニメーションの名前{
変化タイミング{
プロパティ名: 値;
}
}

が基礎で、これらのプロパティやタイミング(殆どの場合、%で指定)を増やし、設定することでアニメーションを定義します。
なおこのkeyframes、プレフィックスがいることもあります。キーフレームの性質上、いちいちそれを生CSSで書いているとややこしいので、後述するようなmixinをscssで設定し、コンパイルすることをお勧めします。

animationsプロパティ

ある要素に、keyframesで指定しておいたアニメーションが適用されるようにするプロパティがanimationsプロパティです。正確にはショートハンドプロパティなので、これもtransitionと同じく、個別に項目を設定できます。
以下のような形でアニメーションの値を設定できます。

animation: アニメーション名 アニメーションにかける時間 タイミング関数 遅延時間 繰り返す回数 fill-modeの指定 アニメーションの再生状態

fill-modeは、アニメーションを開始する前とアニメーションを終了した後の要素の状態をどうするかを指定します。アニメーションの再生状態では、アニメーションが止まっているか、走っているかの状態を指定します。
かなりわかりやすくまとまっているWebページを見つけました。ですので、更に詳しく知る場合はこちらにて。

JavaScriptとの組み合わせ

setInterval、setTimeoutなどを利用して、タイミングを合わせることができる。
最近はJavaScriptも遅延が少ないので、ms単位でピタッと合わねばならない、という場合でなければこれで十分かと。
なお、JavaScriptではms単位で指定することになるが、CSSではs、ms単位。1sや1msという形で、単位を付けることで指定する。

JavaScriptでクラスを追加・削除することでCSSを利用する

最近はjQueryを特に使わない生のJavaScriptでも、classList.addを使うことでDOM要素にクラスを追加できる。removeすることでクラスを削除可能。

var a = document.getElementById(“example”);
a.classList.add(“exam1”);
a.classList.remove(“exam1”);

この追加したり削除したりするクラスにanimationをCSSで設定しておくことで、JavaScriptとanimationを連携させて利用することができる。
つまり、ある要素をアニメーションさせたいとき、JavaScriptでCSSにanimationを設定したクラスをその要素に追加する。クラスを再び同じ要素に設定し、同じ動作をさせたいとき等に備えて、CSSのanimationが終了する時間にsetTimeoutでJavaScriptから該当クラスを削除する、ということができるのである。

組み合わせることによる利点

なぜこのようなことをするかというと、単純にCSSでアニメーションを定義したほうが楽であるし、どうやら滑らかに動くらしいから。
JavaScriptのループでアニメーションは確かに制御が煩雑そうだなあ、とトップページのスライダーを作っていて思ったし、調べてみると昔はいちいちコマ送りでスタイルを設定しなおす感じでアニメーション実装などしていたようなので、CSSでアニメーション制御のほうが圧倒的に楽だと思った。JavaScriptの実行に遅延が発生していても、ある程度CSSの滑らかさは残せるはずだし…。

アニメーション関連の、SCSSで便利なmixin

このようにアニメーションを実現できるCSSですが、昔の限られたマシン性能やネットワーク帯域では、アニメーションは基本的にありませんでした。あったとしてもJavaScriptです。
つまり、アニメーションのプロパティが追加され、殆どのブラウザで動くようになったのは最近でした。
それまでの時代の変遷により、実はアニメーションプロパティには現在使用されているブラウザをカバーするだけでも、わりとプレフィックスを必要とします(@-webkit-keyframesなど)。
animationプロパティなども、かなりの数の設定法がずらり。
そのため、SCSSを使える場合、mixinを使ったほうが便利です。mixinのような仕組みがあるならば、ほかのCSS出力言語を使ってもいいかもしれませんが、私の使用しているものはSCSSで、mixinのレパートリーもそれによるものになりますので、そちらを紹介します。

transitionプロパティ関係のmixinについて

transitionプロパティ関連のmixinについては、使っていません。
だいぶ普及が進んだので、もうプレフィックスはとくにいらないみたいです。

keyframes関係のmixin

以下のような感じです。

@mixin kf-def($animation-name){
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
@-moz-keyframes #{$animation-name} {
        @content;
    }
@-o-keyframes #{$animation-name} {
        @content;
    }
@keyframes #{$animation-name} {
        @content;
    }
}

animation関係のmixin

@mixin animation($animations...){
    -webkit-animation: $animations;
    -khtml-animation: $animations;
    -moz-animation: $animations;
    -ms-animation: $animations;
    -o-animation: $animations;
    animation: $animations;
}

全体として

CSSでできることが増えました。フレームごとに描画するようなアニメーションはCSSに任せ、大きなタイミングでの切り替えをJavaScriptにまかせるようにすると、いろいろ構築するのが簡単になるかもです。

広告

関連コンテンツと広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA