Aug.31st,2021
CSSアニメーション
CSSの“アニメーション”
過去にはHTML文書などに動きをつけるにはスクリプトによる複雑なコードを記述するほかありませんでしたが、CSS3で追加されたアニメーション機能によりスタイルシートのみでアニメーションの実装が可能になりました。
CSSのアニメーションには以下のような利点があります。
- スクリプトの知識がなくても単純なアニメーションであれば簡単に実装することができます。
- スクリプトによるアニメーションよりも比較的軽やかに動作し、システムへの負荷が軽くなります。
- スクリプトによるアニメーションと見た目の遜色がありません。
Internet Explorer 9などの古いバージョンのブラウザではCSSによるアニメーションには対応していませんが、現代の主要なブラウザはすべて対応しています。
“アニメーション”と呼ばれる機能には“CSS Transitions”仕様書で定義されている“遷移効果”と“CSS Animations”仕様書で定義されている“アニメーション”の2種類があります。
これらの機能は要素に適用されているスタイルの大きさ、色、位置などを指定しているプロパティの値を変化させることによって要素の動きを表現します。
“transform”プロパティによる要素の変形との相性が良く、併用されることが多いです。
アニメーション・タイプ
多くのプロパティがアニメーションの対象となり得ますが、すべてのプロパティをアニメーションに利用できるわけではありません。
それぞれのプロパティがアニメーションに利用できるかどうかと、アニメーションの対象となった時にどのように振舞うかはそれぞれのプロパティや値の仕様で定義された“アニメーション・タイプ(Animation Type)”に依ります。アニメーション・タイプはアニメーションと遷移効果のどちらにも共通します。
アニメーション・タイプはアニメーション中のキーフレーム間や遷移効果中にプロパティの値がどのように算出されるかを定義します。
アニメーション・タイプには以下の5種類があります。
アニメーション不可 (Not Animatable)
プロパティはアニメーションには使用できず、キーフレームに含まれる時は処理されず、遷移効果の影響も受けません。
離散 (Discrete)
プロパティの値は組み合わせることができないため、キーフレーム間もしくは遷移効果の進捗度が“50%”になった時に瞬間的に値が切り替わります。
計算値 (By Computed Value)
対になる値の計算値を補間、加算、集積のいずれかの方法で組み合わせてキーフレーム間もしくは遷移効果の進捗度に合わせた値を算出します。
値のリストのアイテムの数が異なる場合や比較される値の型が異なる場合は“離散”として扱います。
繰り返し可能なリスト (Repeatable List)
対になる値の計算値を補間、加算、集積のいずれかの方法で組み合わせてキーフレーム間もしくは遷移効果の進捗度に合わせた値を算出します。
値のリストのアイテムの数が異なる場合は短い方のリストを繰り返すことで補います。
値が組み合わせられない場合やいずれかの値のアニメーション・タイプが“離散”である場合は“離散”として扱います。
別途定義
いくつかのプロパティは以上のアニメーション・タイプには当てはまらず、アニメーションの対象となった時の振る舞いはそれぞれの仕様の中で別途定義されています。
アニメーションのサンプル
<div class="sample-outer-box">
<div class="sample-inner-box1">
橙
</div>
<div class="sample-inner-box2">
赤
</div>
<div class="sample-inner-box3">
黄
</div>
<div class="sample-inner-box4">
紫
</div>
<div class="sample-inner-box5">
青
</div>
</div>
@keyframes SampleRotation {
0% { transform: rotate3d(1,1,1,0deg); }
100% { transform: rotate3d(1,1,1,360deg); }
}
@keyframes SampleCorners {
0% { border-radius: 0px; }
50% { border-radius: 20px; }
100% { border-radius: 0px; }
}
.sample-inner-box1 {
animation: 5s ease infinite SampleRotation, 5s ease-in-out infinite SampleCorners;
background-color: #ee7800; /* ■ */
}
.sample-inner-box2 {
animation: 5s ease infinite SampleRotation, 5s ease-in-out infinite SampleCorners;
background-color: #c9171e; /* ■ */
}
.sample-inner-box3 {
animation: 5s ease infinite SampleRotation, 5s ease-in-out infinite SampleCorners;
background-color: #fcc800; /* ■ */
}
.sample-inner-box4 {
animation: 5s ease infinite SampleRotation, 5s ease-in-out infinite SampleCorners;
background-color: #aa4c8f; /* ■ */
}
.sample-inner-box5 {
animation: 5s ease infinite SampleRotation, 5s ease-in-out infinite SampleCorners;
background-color: #00a3af; /* ■ */
}
遷移効果
“遷移効果”とは？
“遷移効果(Transitions)”は要素に適用されているスタイルのプロパティの値が変更された時に通常は直ちに値の変更が反映されるところを指定された時間をかけて緩やかに変化させるための機能です。
遷移効果は“:hover”擬似クラスなどの擬似クラス、メディア・クエリ、スクリプトによる文書やCSSへの変更などによって要素に適用されているプロパティの値が変化した時に適用されます。
遷移効果は値が変更された時に1回だけしか実行されませんが、“transition-duration”プロパティで遷移の所要時間を指定するだけで簡単に実装することができます。
遷移効果の“書き方”
要素に遷移効果を実装するには少なくとも遷移の所要時間を指定する“transition-duration”プロパティの指定が必要となります。
transition-duration: 3s;
他のプロパティの設定は初期値のままでも遷移効果は適用されます。
.box {
transition-duration: 3s; /* ホバーが終わった時の遷移効果 */
}
.box:hover {
transform: scale(1.5);
transition-duration: 2s; /* ホバーした時の遷移効果 */
}
関連プロパティ
個別指定プロパティ
| プロパティ | 説明 |
|---|---|
| transition-property: | 遷移効果の対象プロパティを指定する |
| transition-duration: | 遷移効果の所要時間を指定する |
| transition-timing-function: | 遷移効果のイージングを指定する |
| transition-delay: | 遷移効果の遅延時間を指定する |
一括指定プロパティ
| プロパティ | 説明 |
|---|---|
| transition: | 遷移効果を指定する |
アニメーション
“アニメーション”とは？
遷移効果はプロパティの値が変更された時にだけ実行されるのに対して、“アニメーション(Animations)”はアニメーションについてのプロパティ(“animation”プロパティなど)が対象の要素に適用された時に実行されます。
アニメーションは“@keyframes”ルールによってキーフレームを定義しなければならないのでややコードが複雑になりますが、遷移効果よりも複雑な動きや、複数回繰り返されるアニメーションを実装することができます。
CSSのアニメーションには実行のタイミングを制御する機能は最低限しかないため、擬似クラスで表現できないユーザー・アクションなどの後にアニメーションを実行したい場合にはスクリプトによるクラスの追加などが必要になります。
アニメーションの“書き方”
要素にアニメーションを実装するには少なくとも、アニメーションのキーフレームを定義する“@keyframes”ルール、それにキーフレームを要素に結び付ける“animation-name”プロパティとアニメーションの所要時間を指定する“animation-duration”プロパティの指定が必要となります。
“@keyframes”ルールはアニメーションによってどのようにアニメーションの対象要素に適用されるプロパティの値が変化するかを指定し、開始時と終了時、および中間ステップとなるアニメーションのキーフレームを定義します。アニメーションは要素にもともと適用されているスタイルを“@keyframes”ルールで指定したスタイルで上書きすることで表現されます。
@keyframes SampleAnimation {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
“animation-name”プロパティは“@keyframes”ルールで定義されたキーフレームを要素に関連付けることで要素にアニメーションを適用します。このプロパティは要素に複数の“@keyframes”ルールを同時に関連付けることができ、複数のアニメーションを組み合わせることもできます。
animation-name: SampleAnimation;
“animation-duration”プロパティはアニメーションの所要時間を指定します。このプロパティの初期値は0秒を表す“0s”なので、設定を上書きしなければアニメーションは再生されません。
animation-duration: 5s;
他のプロパティの設定は初期値のままでもアニメーションは適用されます。
@keyframes SampleAnime {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.box {
animation-name: SampleAnime;
animation-duration: 5s;
animation-iteration-count: infinite; /* ずっと繰り返す */
}
関連プロパティ
個別指定プロパティ
| プロパティ | 説明 |
|---|---|
| animation-name: | アニメーションのキーフレームを指定する |
| animation-duration: | アニメーションの所要時間を指定する |
| animation-timing-function: | アニメーションのイージングの方法を指定する |
| animation-iteration-count: | アニメーションの繰り返しを指定する |
| animation-direction: | アニメーションの再生方向を指定する |
| animation-play-state: | アニメーションを一時停止する |
| animation-delay: | アニメーションの遅延時間を指定する |
| animation-fill-mode: | アニメーションのスタイルを実行前後も適用 |
一括指定プロパティ
| プロパティ | 説明 |
|---|---|
| animation: | アニメーションを指定する |
スクリプトの併用
CSSアニメーションとスクリプト
スクリプトを使用せずに簡単にウェブページの動きを表現することができる遷移効果とアニメーションですが、遷移効果とアニメーションによって発生するイベントを処理するためのイベントハンドラがいくつか定義されており、遷移効果やアニメーションの開始と終了、繰り返しを検知してスクリプトで使用することができます。これらのイベントハンドラを使用することで遷移効果とアニメーションをさらに細かく制御することができます。
サンプルコード
var count = 0;
document.getElementById("sampleElement").onanimationiteration = function() {
count++;
document.getElementById("counter").innerHTML = count;
};
@keyframes SampleAnime {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.box {
animation-name: SampleAnime;
animation-duration: 5s;
animation-iteration-count: infinite;
}
<div id="sampleElement">♪</div>
<p>回転数：<output id="counter">0</output></p>
回転数：
イベントハンドラ
遷移効果イベントとイベントハンドラ
| イベントハンドラ属性 | イベント | 説明 |
|---|---|---|
| ontransitionrun="" | transitionrun | 遷移効果が生成された時に発生するイベント |
| ontransitionstart="" | transitionstart | 遷移効果が開始した時に発生するイベント |
| ontransitionend="" | transitionend | 遷移効果が終了した時に発生するイベント |
| ontransitioncancel="" | transitioncancel | 遷移効果が中止された時に発生するイベント |
アニメーションイベントとイベントハンドラ
| イベントハンドラ属性 | イベント | 説明 |
|---|---|---|
| onanimationstart="" | animationstart | アニメーションが開始した時に発生するイベント |
| onanimationiteration="" | animationiteration | アニメーションの1周期が終了した時に発生するイベント |
| onanimationend="" | animationend | アニメーションが終了した時に発生するイベント |
| onanimationcancel="" | animationcancel | アニメーションが中止された時に発生するイベント |
