Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

アニメーション

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

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

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

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

キーフレームとは

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

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

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

前と同じ図だが今度はキーフレーム — キーフレームを使用した点滅するアニメーション。

`@keyframes`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<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 ルール内の from と to は、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` プロパティ

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

`animation-duration`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

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

`animation-timing-function`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

アニメーションで自然な動きを再現するには、各ポイントでのアニメーションの速度を計算します。計算値は多くの場合曲線: アニメーションは再生中に可変速度で再生されます。 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 軸に沿ってプロットされます。

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

`steps` イージング関数

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

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

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

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

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

`animation-iteration-count`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

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

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

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

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

`animation-direction`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

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

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

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

`animation-delay`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<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`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

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

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

`animation-fill-mode`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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 アニメーションの名前またはカスタム識別子では、大文字と小文字が区別されますか？

○

🎉

いいえ

CSS では、2 つのアニメーションに同じ名前を付けることはできませんが、SWOOP と swoop は共存できます。

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

start と end。

もう一度考えてみましょう。

0% と 100%。

from は 0% と同じで、to は 100% と同じです。

0、1

もう一度考えてみましょう。

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

動的なタイミング

もう一度考えてみましょう。

遅延

もう一度考えてみましょう。

Easing

🎉

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

ブラウザは要素の現在の状態をキーフレームとして取得するため、少なくとも 1 つのキーフレームが必要です。

もう一度考えてみましょう。

アニメーション

キーフレームとは

@keyframes

animation プロパティ

animation-duration

animation-timing-function

steps イージング関数

animation-iteration-count

animation-direction

animation-delay

animation-play-state

animation-fill-mode

animation の省略形

アニメーションを扱う際の考慮事項

理解度をチェックする

`@keyframes`

`animation` プロパティ

`animation-duration`

`animation-timing-function`

`steps` イージング関数

`animation-iteration-count`

`animation-direction`

`animation-delay`

`animation-play-state`

`animation-fill-mode`

`animation` の省略形