アニメーションは、インタラクティブな要素を強調し、デザインに興味と楽しさを加えるための優れた方法です。このモジュールでは CSS を使用してアニメーション効果を追加し
クリックしたときに、セクションに関する有用な情報を提供する小さなヘルパーがインターフェース上に表示される場合があります。多くの場合、それらの情報にはパルスのアニメーションが表示され、情報があり、操作する必要があることをさりげなく知らせます。このモジュールでは、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 にはプリセットとして使用可能なキーワードがいくつかあります(linear
、ease
、ease-in
、ease-out
、ease-in-out
)。これは、animation-timing-function の値として使用されます。
.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);
}
1 つ目の引数はステップ数です。キーフレームの数がステップと同じ場合、各キーフレームはステップの正確な時間にわたって順番に再生されます。状態間の遷移はありません。キーフレームがステップ数より少ない場合、ブラウザは 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
アニメーションの名前またはカスタム ID では大文字と小文字が区別されますか?
SWOOP
と swoop
を共存させることができます。キーワード from
と to
は次のものと同じです。
start
、end
。0%
、100%
。from
は 0%
と同じで、to
は 100% と同じです。0
、1
animation-timing-function
は、一般的に次のように知られています。
@keyframes
アニメーション内で必要なキーフレームの最小数はいくつですか。