アニメーションは、インタラクティブな要素をハイライト表示し、デザインに興味や楽しさを加えるのに最適な方法です。このモジュールでは、CSS を使用してアニメーション エフェクトを追加し、制御する方法について説明します。
インターフェース上に小さなヘルパーが表示され、クリックすると、そのセクションに関する有用な情報が表示されます。多くの場合、通知には点滅するアニメーションが表示され、情報があり、操作する必要があることを軽く知らせます。しかし、CSS ではどのようにしてこれを行っているのでしょうか。
CSS では、CSS アニメーションを使用してこのタイプのアニメーションを作成できます。CSS アニメーションでは、キーフレームを使用してアニメーション シーケンスを設定できます。アニメーションには、単純な 1 つの状態のアニメーションだけでなく、複雑な時間ベースのシーケンスも使用できます。
キーフレームとは
アニメーション ソフトウェアや CSS など、何かをアニメーション化するためのツールでは、キーフレームを使用して、タイムラインに沿ってアニメーションの状態をタイムスタンプに割り当てることができます。
コンテキストとして「パルサー」を見てみましょう。 アニメーション全体は 1 秒間実行され、2 つの状態で実行されます。
アニメーションの状態の開始と終了には、それぞれ特定のポイントがあります。これらをキーフレームでタイムラインにマッピングします。
@keyframes
キーフレームとは何かを理解したところで、CSS の @keyframes
ルールの仕組みを理解しましょう。2 つの状態を持つ基本的なルールは次のとおりです。
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
まず注意すべきなのは、カスタム ID(カスタム ID)です。わかりやすい表現で、キーフレーム ルールの名前にもなります。このルールの ID は my-animation
です。
カスタム ID は関数名と同様に機能します。これにより、関数モジュールで学習したように、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);
}
最初の引数はステップ数です。 ステップを 10 として定義し、キーフレームが 10 個ある場合、各キーフレームは状態を遷移することなく、正確な時間にわたって順番に再生されます。ステップに必要なキーフレームの数が十分でない場合、2 番目の引数に応じてキーフレーム間のステップが追加されます。
2 つ目の引数は方向です。デフォルトの end
に設定すると、ステップはタイムラインの最後に終了します。start
に設定すると、アニメーションの最初のステップは開始と同時に完了します。つまり、end
よりも 1 ステップ早く終了します。
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count プロパティは、@keyframes
タイムラインを実行する回数を定義します。デフォルトは 1 です。つまり、アニメーションがタイムラインの最後に達すると、最後に停止します。数値は負数にできません。
infinite
キーワードを使用してアニメーションをループさせることができます。このレッスンの冒頭の「Pulser」デモはこの様に機能します。
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
プロパティとは異なり、負の値として定義できます。負の値を設定すると、@keyframes
のタイムラインはその時点で開始されます。
たとえば、アニメーションの長さが 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
:forwards
とbackwards
の両方のルールに従います。
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
アニメーションの名前またはカスタム ID では、大文字と小文字が区別されますか?
SWOOP
と swoop
を共存することは可能です。キーワード from
と to
は、
start
、end
。0%
、100%
。from
は 0%
と同じで、to
は 100% と同じです。0
、1
animation-timing-function
は、
@keyframes
アニメーション内に必要なキーフレームの最小数はいくつですか。