アニメーションは、インタラクティブな要素を強調し、興味を引くのに最適な方法です。 デザインを楽しく演出できますこのモジュールでは、Google Chat で CSS によるアニメーション効果です
場合によっては、インターフェース上に小さなヘルパーが クリックしたときに表示されるセクションの情報が表示されますこれらは多くの場合 点滅するアニメーションで、情報の存在をさりげなく説明し、 やり取りする必要があります このモジュールでは、Terraform を使用してこれらのヘルパーやその他のアニメーションを作成する方法を説明します。 CSS。
CSS を使用して、キーフレームを含むアニメーション シーケンスを設定できます。これらのシーケンスは 基本的な 1 状態のアニメーションにも、時間ベースの複雑なシーケンスもあります。
キーフレームとは
ほとんどのアニメーション ツールでは、キーフレームはアニメーションを割り当てるために使用するメカニズム タイムスタンプにすばやく変換できます。
以下は、点滅する「helper」のタイムラインの例です。あります。アニメーションが実行されます。 状態は 2 つあります
<ph type="x-smartling-placeholder">これらのアニメーションの状態は、それぞれ開始点と終了点があります。 タイムライン上にキーフレームをマッピングします。
<ph type="x-smartling-placeholder">@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;
}
}
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 軸に沿ってプロットされます。
<ph type="x-smartling-placeholder">ベジェ曲線の理解は複雑です。次のようなビジュアル ツールが ジェネレータが役立ちます。
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
アニメーションの名前またはカスタム識別子では、大文字と小文字が区別されますか?
キーワード from
と to
は、以下の場合と同じです。
start
と end
。0
、1
0%
と 100%
。animation-timing-function
は一般に次のようにも知られています。
@keyframes
アニメーションに必要なキーフレームの最小数はいくつですか?