CSS または JavaScript を使用してアニメーション化できます。どちらを使用すべきですか。また、その理由は何ですか。
ウェブ上でアニメーションを作成する方法は主に 2 つあります。CSS を使用する方法と JavaScript を使用する方法です。どちらを選択するかは、プロジェクトの他の依存関係と、実現しようとしている効果の種類によって異なります。
まとめ
- UI 要素の状態の切り替えなど、単純な「ワンショット」遷移には CSS アニメーションを使用します。
- バウンド、停止、一時停止、巻き戻し、スローダウンなどの高度なエフェクトが必要な場合は、JavaScript アニメーションを使用します。
- JavaScript でアニメーション化する場合は、Web Animations API や使い慣れた最新のフレームワークを使用します。
ほとんどの基本的なアニメーションは CSS または JavaScript を使用して作成できますが、作業量と時間は異なります(CSS と JavaScript のパフォーマンスもご覧ください)。それぞれに長所と短所がありますが、適切なガイドラインを以下に示します。
- UI 要素の状態が小さく自己完結型の場合は、CSS を使用します。ナビゲーション メニューを横から引き込んだり、ツールチップを表示したりするには、CSS の遷移とアニメーションが最適です。最終的には JavaScript を使用して状態を制御することになりますが、アニメーション自体は CSS に格納します。
- アニメーションを細かく制御する必要がある場合は、JavaScript を使用します。Web Animations API は標準ベースのアプローチで、現在ほとんどの最新のブラウザで利用可能です。これにより実際のオブジェクトが提供され、複雑なオブジェクト指向アプリケーションに最適です。JavaScript は、アニメーションを停止、一時停止、速度を落としたり、逆にしたりする必要がある場合にも役立ちます。
- シーン全体を手動でオーケストレートする場合は、
requestAnimationFrame
を直接使用します。これは高度な JavaScript のアプローチですが、ゲームを作成したり HTML キャンバスに描画したりする場合に便利です。
また、jQuery の .animate()
メソッドや GreenSock の TweenMax など、アニメーション機能を含む JavaScript フレームワークをすでに使用している場合は、全体的にその方法を採用してアニメーションを作成することをおすすめします。
CSS によるアニメーション
CSS を使ったアニメーションは、画面上で何かを動かす最も簡単な方法です。この方法は、実行する処理を指定するため、宣言型と説明されています。
要素 100px
を X 軸と Y 軸の両方で移動する CSS を以下に示します。これは、500ms
を受け取るように設定されている CSS 遷移を使用して行われます。move
クラスが追加されると、transform
値が変更され、遷移が開始します。
.box {
transform: translate(0, 0);
transition: transform 500ms;
}
.box.move {
transform: translate(100px, 100px);
}
遷移の持続時間以外にも、イージングのオプションがあります。イージングは基本的にアニメーションの見え方です。イージングの詳細については、イージングの基本ガイドをご覧ください。
上記のスニペットのように、アニメーションを管理する個別の CSS クラスを作成する場合は、JavaScript を使用して各アニメーションのオン / オフを切り替えることができます。
box.classList.add('move');
これにより、アプリのバランスが保たれます。JavaScript で状態を管理することに集中し、ターゲット要素に適切なクラスを設定するだけで、ブラウザにアニメーションの処理を任せることができます。この方法によれば、要素の transitionend
イベントをリッスンできますが、その場合は、旧バージョンの Internet Explorer のサポートを放棄する必要があります。このようなイベントをサポートする最初のバージョンは、バージョン 10 です。他のブラウザでは、しばらく前からこのイベントがサポートされていました。
遷移の終了をリッスンするために必要な JavaScript は次のようになります。
var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);
function onTransitionEnd() {
// Handle the transition finishing.
}
CSS 遷移を使用するだけでなく、CSS アニメーションを使用することもできます。これにより、個々のアニメーション キーフレーム、継続時間、反復処理をより細かく制御できます。
たとえば、トランジションと同じ方法でボックスをアニメーション化し、クリックなどのユーザー操作なしで、無限に繰り返してアニメーション化できます。複数のプロパティを同時に変更することもできます。
.box {
animation-name: movingBox;
animation-duration: 1300ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes movingBox {
0% {
transform: translate(0, 0);
opacity: 0.3;
}
25% {
opacity: 0.9;
}
50% {
transform: translate(100px, 100px);
opacity: 0.2;
}
100% {
transform: translate(30px, 30px);
opacity: 0.8;
}
}
CSS アニメーションでは、ターゲット要素とは別にアニメーション自体を定義し、animation-name
プロパティを使用して必要なアニメーションを選択します。
古いブラウザで CSS アニメーションを動作させるには、ベンダー プレフィックスを追加する必要があります。必要な CSS のプレフィックス付きバージョンを作成できるツールは数多くあります。それにより、プレフィックスのないバージョンをソースファイルに記述できます。
JavaScript と Web Animations API を使用してアニメーション化する
JavaScript を使用したアニメーションの作成は、それに比べると、CSS の遷移やアニメーションを記述するよりも複雑ですが、通常は開発者の作業効率が大幅に向上します。Web Animations API を使用すると、特定の CSS プロパティをアニメーション化したり、コンポーズ可能な効果オブジェクトを作成したりできます。
JavaScript アニメーションはコードの一部としてインラインで記述するため、命令型です。他のオブジェクト内にカプセル化することもできます。前述の CSS 遷移を再現するために作成する必要がある JavaScript は次のとおりです。
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';
});
デフォルトでは、ウェブ アニメーションは要素の表示のみを変更します。オブジェクトを移動した位置に残したい場合は、アニメーションの終了時に、サンプルのように、その基になるスタイルを変更する必要があります。
Web Animations API は、W3C の比較的新しい標準です。最新のブラウザのほとんどでネイティブにサポートされています。最新のブラウザに対応していない場合は、ポリフィルを利用できます。
JavaScript アニメーションでは、すべてのステップで要素のスタイルを完全に制御できます。つまり、アニメーションの速度を遅らせたり、一時停止、停止、反転したり、要素を適宜操作したりできます。これは、動作を適切にカプセル化できるため、複雑なオブジェクト指向アプリケーションを構築する場合に特に便利です。