アニメーション

アニメーションは、インタラクティブな要素を強調し、興味を引くのに最適な方法です。 デザインを楽しく演出できますこのモジュールでは、Google Chat で CSS によるアニメーション効果です

場合によっては、インターフェース上に小さなヘルパーが クリックしたときに表示されるセクションの情報が表示されますこれらは多くの場合 点滅するアニメーションで、情報の存在をさりげなく説明し、 やり取りする必要があります このモジュールでは、Terraform を使用してこれらのヘルパーやその他のアニメーションを作成する方法を説明します。 CSS。

点滅するアイコンは、 重要な情報に注意を払うことができます。

CSS を使用して、キーフレームを含むアニメーション シーケンスを設定できます。これらのシーケンスは 基本的な 1 状態のアニメーションにも、時間ベースの複雑なシーケンスもあります。

キーフレームとは

ほとんどのアニメーション ツールでは、キーフレームはアニメーションを割り当てるために使用するメカニズム タイムスタンプにすばやく変換できます。

以下は、点滅する「helper」のタイムラインの例です。あります。アニメーションが実行されます。 状態は 2 つあります

<ph type="x-smartling-placeholder">
</ph> 1 秒間のパルサー アニメーションの状態 点滅するアニメーションの状態。

これらのアニメーションの状態は、それぞれ開始点と終了点があります。 タイムライン上にキーフレームをマッピングします。

<ph type="x-smartling-placeholder">
</ph> 前と同じ図だが今度はキーフレーム
キーフレームを使用した点滅するアニメーション。

@keyframes

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

CSS @keyframes アニメーション キーフレームと同じコンセプトに基づいています。

次に、2 つの状態の例を示します。

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

最初の重要な部分は カスタム識別子(custom-ident keyframes ルールの名前を指定します。この例の ID は my-animation です。 カスタム識別子は関数名のように機能しますが、 CSS コードの別の場所で keyframes ルールを参照することもできます。

keyframes ルール内の fromto は、0% を表すキーワードで、 100%: アニメーションの開始と終了。 次のように、同じルールを再作成できます。

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

時間枠内で好きなだけ位置を追加できます。 点滅するヘルパーの例では、2 つの状態があります。 できます。つまり、keyframes ルールには 2 つの位置を それぞれのキーフレームの変更を表すことができます。

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
pulse ルールを編集して、アニメーションが 。

animation プロパティ

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

CSS ルールで @keyframes を使用するには、さまざまなアニメーションを定義するか、 プロパティを個別に選択するか、animation プロパティです。

animation-duration

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

.my-element {
    animation-duration: 10s;
}

animation-duration プロパティは、@keyframes タイムラインの長さを時間値として定義します。 デフォルトは 0 秒です。つまりアニメーションは引き続き再生されますが、 すぐに確認できます負の時間値は使用できません。

animation-timing-function

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

アニメーションで自然な動きを再現するには、 各ポイントでのアニメーションの速度を計算します。計算値は多くの場合 曲線: アニメーションは再生中に可変速度で再生されます。 animation-duration を作成し、ブラウザが @keyframes で定義された値を超える値を計算する。

CSS にはプリセットとして使用できるキーワードがあり、 animation-timing-function: lineareaseease-inease-outease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}
アニメーションを再生するタイミング関数を変更してみる あります。

イージング関数の値は曲線的に見えるため、イージングは ベジェ曲線: 速度をモデル化するために使用する関数の一種です。それぞれのタイミングは ease などの関数キーワードは、事前定義されたベジェ曲線を参照します。CSS では cubic-bezier() 関数を使用してベジェ曲線を直接定義できます。 これは、x1y1x2y2 の 4 つの数値を受け入れます。

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

これらの値により、曲線の各部分が X 軸と Y 軸に沿ってプロットされます。

<ph type="x-smartling-placeholder">
</ph> 進行と時間のグラフのベジェ曲線
ベジェ曲線の例。

ベジェ曲線の理解は複雑です。次のようなビジュアル ツールが ジェネレータが役立ちます。

steps イージング関数

より細かい制御が必要な場合は、 曲線ではなく一定間隔で動くようになりますsteps() イージング関数を使用すると、 タイムラインを同じ長さの定義された間隔に分割します。

.my-element {
    animation-timing-function: steps(10, end);
}

最初の引数はステップ数です。同じ数のノードが 各キーフレームは、指定した時間間隔で順番に再生されます。 状態間の遷移は発生しません。 キーフレームの数がステップより少ない場合、ブラウザはキーフレームとステップの間にステップを追加します。 キーフレームが作成されます。

2 つ目の引数は方向です。end に設定されている場合は、 デフォルトでは、ステップはタイムラインの最後で終了します。start に設定されている場合は、 アニメーションの最初のステップは、開始するとすぐに完了します。つまり、 end の 1 ステップ前に終了します。

ステップがある場合とない場合のアニメーションを比較します。

animation-iteration-count

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

.my-element {
    animation-iteration-count: 10;
}

Animation-iteration-count プロパティは、期間中に @keyframes タイムラインを実行する回数を定義します。 作成します。デフォルトは 1 で、 タイムラインの最後に到達します。この値には負の数を指定できません。

このアニメーションの反復回数を変更してみましょう。

アニメーションをループさせるには、反復回数を infinite に設定します。このように アニメーションが機能します。

点滅するアニメーションが無限に繰り返されます。

animation-direction

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

.my-element {
    animation-direction: reverse;
}

キーフレーム上のタイムラインの向きを設定できます。 animation-direction, これは次の値を取ります。

  • normal: デフォルト値(転送)。
  • reverse: タイムライン上を逆戻りします。
  • alternate: アニメーションが繰り返されるたびに、タイムラインが交互に切り替わります。 逆方向へと走っていくのです
  • alternate-reverse: alternate に似ていますが、アニメーションは タイムラインが逆になります。
アニメーションの方向を変更してみましょう。

animation-delay

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

.my-element {
    animation-delay: 5s;
}

Animation-delay プロパティは、アニメーション開始までのブラウザの待機時間を定義します。 animation-duration プロパティと同様に、時間の値を取ります。

animation-duration とは異なり、animation-delay を除外キーワードとして定義できます そうすると、アニメーションは画面上の対応する位置で タイムラインが表示されます。たとえば、アニメーションの長さが 10 秒で、 animation-delay から -5s まで、アニメーションは タイムラインが表示されます。

アニメーションの遅延を変更してみましょう。

animation-play-state

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

.my-element:hover {
    animation-play-state: paused;
}

Animations-play-state プロパティを使用して、アニメーションを再生または一時停止できます。 デフォルト値は running です。paused に設定すると、アニメーションは一時停止します。

アニメーション要素にカーソルを合わせ、 アニメーションを一時停止します。

animation-fill-mode

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

animation-fill-mode プロパティは、@keyframes タイムライン内のどの値を アニメーションが開始または終了した後です。デフォルト値は none です。つまり、 アニメーションが終了すると、タイムライン内の値は破棄されます。 その他にも次のような対応策があります。

  • forwards: アニメーションの方向に基づいて、最後のキーフレームが維持されます。
  • backwards: アニメーションの方向に基づいて、最初のキーフレームが維持されます。
  • both: 最初と最後のキーフレームが維持されます。
給油モードを変更してみてください。

animation の省略形

各プロパティを個別に定義する代わりに、 animation 省略形を使用すると、 次の順序で処理します。

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. 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 アニメーションの名前またはカスタム識別子では、大文字と小文字が区別されますか?

いいえ

キーワード fromto は、以下の場合と同じです。

01
0%100%
startend

animation-timing-function は一般に次のようにも知られています。

Easing
動的なタイミング
遅延

@keyframes アニメーションに必要なキーフレームの最小数はいくつですか?

4
3
2
1