The CSS Podcast - 022: Animation
インターフェースに小さなヘルパーが表示され、クリックするとそのセクションに関する有用な情報が提供されることがあります。多くの場合、情報があることと操作が必要であることをさりげなく伝えるために、点滅するアニメーションが使用されます。このモジュールでは、CSS を使用してこれらのヘルパーやその他のアニメーションを作成する方法について説明します。
CSS を使用して、キーフレームを含むアニメーション シーケンスを設定できます。これらのシーケンスは、基本的な 1 つの状態のアニメーションでも、複雑な時間ベースのシーケンスでもかまいません。
キーフレームとは
ほとんどのアニメーション ツールでは、キーフレームは、タイムライン上のタイムスタンプにアニメーション状態を割り当てるために使用されるメカニズムです。
たとえば、点滅する「ヘルパー」ドットのタイムラインは次のとおりです。アニメーションは 1 秒間実行され、2 つの状態があります。
これらのアニメーション状態はそれぞれ、開始と終了の特定のポイントがあります。これらは、キーフレームを使用してタイムラインにマッピングします。
@keyframes
CSS @keyframes
は、アニメーション キーフレームと同じコンセプトに基づいています。
2 つの状態の例を次に示します。
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
最初の重要な部分は、カスタム識別子(custom-ident
)です。これは、キーフレーム ルールの名前です。この例の ID は my-animation
です。カスタム識別子は関数名のように機能し、CSS コードの他の場所でキーフレーム ルールを参照できます。
キーフレーム ルール内の from
と to
は、アニメーションの開始と終了を表す 0%
と 100%
を表すキーワードです。同じルールを次のように再作成できます。
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
期間に沿って、任意の数のポジションを追加できます。パルス ヘルパーの例では、2 つの状態があり、2 つのキーフレームに変換されます。つまり、キーフレーム ルール内に 2 つの位置があり、これらのキーフレームの変化を表しています。
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
プロパティ
CSS ルールで @keyframes
を使用するには、さまざまなアニメーション プロパティを個別に定義するか、animation
省略形プロパティを使用します。
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration プロパティは、@keyframes
タイムラインの長さを時間値として定義します。デフォルトは 0 秒です。つまり、アニメーションは実行されますが、あまりにも速すぎて認識できません。負の時間値は使用できません。
animation-timing-function
アニメーションで自然な動きを再現するには、各ポイントのアニメーションの速度を計算するタイミング関数を使用します。計算された値は多くの場合曲線状であるため、animation-duration
の期間にわたってアニメーションが変速で実行され、ブラウザが @keyframes
で定義されている値を超える値を計算すると、要素がバウンドするように見えます。
CSS では、animation-timing-function の値として使用できるプリセットとして、linear
、ease
、ease-in
、ease-out
、ease-in-out
のキーワードがいくつか用意されています。
.my-element {
animation-timing-function: ease-in-out;
}
イージング関数の値は曲線状に見えます。これは、イージングが速度のモデリングに使用される関数の一種であるベジェ曲線を使用して計算されるためです。各タイミング関数キーワード(ease
など)は、事前定義されたベジェ曲線を参照します。CSS では、cubic-bezier()
関数を使用してベジェ曲線を直接定義できます。この関数は、x1
、y1
、x2
、y2
の 4 つの数値を受け入れます。
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
これらの値は、X 軸と Y 軸に沿って曲線の各部分をプロットします。
ベジェ曲線を理解するのは複雑です。Lea Verou によるこのジェネレータなどのビジュアル ツールは非常に便利です。
steps
イージング関数
カーブではなく区切りごとに移動することで、アニメーションをより細かく制御したい場合があります。steps()
イージング関数を使用すると、タイムラインを同じ時間間隔の定義された区間に分割できます。
.my-element {
animation-timing-function: steps(10, end);
}
最初の引数はステップ数です。キーフレームの数がステップ数と同じである場合、各キーフレームは、状態間の遷移なしで、ステップの正確な時間だけ順番に再生されます。キーフレーム数がステップ数より少ない場合は、2 番目の引数に応じてキーフレーム間にステップが追加されます。
2 つ目の引数は方向です。デフォルトの end
に設定されている場合、ステップはタイムラインの終了時に終了します。start
に設定すると、アニメーションの最初のステップは開始するとすぐに完了します。つまり、end
よりも 1 ステップ早く終了します。
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count プロパティは、アニメーション中に @keyframes
タイムラインを実行する回数を定義します。デフォルトでは 1 です。つまり、アニメーションはタイムラインの終点に達すると停止します。この値は負の数にできません。
アニメーションをループさせるには、反復処理回数を infinite
に設定します。これが、このレッスンの冒頭の脈動アニメーションの仕組みです。
animation-direction
.my-element {
animation-direction: reverse;
}
animation-direction を使用して、タイムラインがキーフレーム上で実行される方向を設定できます。この値には次の値を指定できます。
normal
: デフォルト値(前方)。reverse
: タイムラインを後方に再生します。alternate
: アニメーションの反復処理ごとに、タイムラインは前方と後方の実行を交互に行います。alternate-reverse
:alternate
と同様ですが、アニメーションはタイムラインの逆再生から開始されます。
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay プロパティは、アニメーションを開始する前にブラウザが待機する時間を定義します。animation-duration
プロパティと同様に、時間値を受け入れます。
animation-duration
とは異なり、animation-delay
は負の値として定義できます。これにより、アニメーションはタイムラインの対応するポイントから開始されます。たとえば、アニメーションの長さが 10 秒で、animation-delay
を -5s
に設定すると、アニメーションはタイムラインの半分から開始されます。
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state プロパティを使用すると、アニメーションの再生と一時停止を行うことができます。デフォルト値は running
です。paused
に設定すると、アニメーションは一時停止します。
animation-fill-mode
animation-fill-mode プロパティは、アニメーションの開始前または終了後に @keyframes
タイムラインのどの値を保持するかを定義します。デフォルト値は none
です。つまり、アニメーションが完了すると、タイムライン内の値は破棄されます。その他にも次のような対応策があります。
forwards
: アニメーションの方向に基づいて、最後のキーフレームが保持されます。backwards
: 最初のキーフレームは、アニメーションの方向に基づいて保持されます。both
: 最初のキーフレームと最後のキーフレームの両方が保持されます。
animation
の省略形
各プロパティを個別に定義する代わりに、animation
ショートカットで定義できます。これにより、アニメーション プロパティを次の順序で定義できます。
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
アニメーションを扱う際の考慮事項
ユーザーは、アプリやウェブサイトを操作する際に、オペレーティング システムをモーションの低減を優先するように設定できます。この設定は、prefers-reduced-motion メディアクエリを使用して検出できます。
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
アニメーションを表示しない設定とは限りません。アニメーションを減らす、特に予期しないアニメーションを減らすことを推奨しています。この設定と全体的なパフォーマンスについて詳しくは、アニメーション ガイドをご覧ください。
理解度を確認する
アニメーションに関する知識をテストする
@keyframes
アニメーションの名前またはカスタム識別子では大文字と小文字が区別されますか?
キーワード from
と to
は次のキーワードと同じです。
0%
と 100%
。0
、1
start
と end
。animation-timing-function
は、次のようにも呼ばれます。
@keyframes
アニメーションに必要なキーフレームの最小数はいくつですか。