CSS 秘密の花園: Flash アニメーション_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

質問

タグを覚えていますか?もちろん、あなたもこのようなことをしたことがあるでしょう。それは私たちの業界の歴史であり、直角さの象徴となっています。しかし、スタイルと構造の分離の原則に違反するため、世界中の人々がこれを軽蔑していますが、主な理由は、1990 年代後半に Guohui が Web ページでこれを過度に使用し、誰にとっても使用するのが非常に苦痛だったことです (Web当時のページ (による点滅効果がたくさんあり、めまいがします)。このタグを発明したモントゥリ氏でさえ、「 タグの発明は、インターネットにとって史上最悪の行為だ」と述べています。

ただし、煩わしい タグは私にとっては遠い存在ですが、それでも点滅するアニメーション効果が必要な場合があります。最初は奇妙に感じました。家にいるのに必要なものを感じているような気がしました。 Web サイトにちらつき効果をいくつか追加すると、使いやすさが向上し、煩わしさが軽減されます。

一般的なユーザー エクスペリエンスのパターンは、数回 (3 回以内) 点滅し、適用されている UI を変更するか、現在のリンク ターゲットを強調表示することです。このような限定された点滅効果を使用すると、ユーザーの注意を効果的に引き付けることができますが、数を効果的に制御できるため、 タグのような副作用はありません。もう 1 つのモードは、(ユーザーの注意を誘導するために) 良好な状態のみを点滅させ続け、不良状態ではない (オフとオンなど) ことです。

しかし、どうすればこれを達成できるでしょうか? CSS を使用して タグ text-decoration:blink を置き換えるだけでは、十分に強力であっても、ブラウザのサポートが不十分です。私たちの唯一の希望は、CSS アニメーションまたは JavaScript スクリプトを使用することです。

解決策

実際、CSS を使用してあらゆる種類のちらつき効果を実現するには、要素全体 (不透明度)、テキストの色 (color)、境界線 (border-color) など、さまざまな方法があります。フラッシュミュージック。次のコンテンツでは、点滅するテキスト効果が最も一般的であるため、この効果を実装すると仮定します。ただし、ソリューションの他の部分はこの例と似ています。

滑らかなちらつき効果を実現するのは非常に簡単です。最初に私たちが常に提案したことは、次のように賢く処理できます。

@keyframes blink-smooth {     to {         color: transparent     } }.highlight {     animation: 1s blink-smooth 3; }

この効果は、テキストの色から透明にスムーズに変化しますが、突然元のテキストの色に戻ります。 。次の画像を使用すると、時間の経過とともにテキストの色がどのように変化するかを理解し、これが起こっている理由を理解するのに役立ちます:

実際には、これを行うことをお勧めします。この場合、望ましい効果が得られました。ただし、テキストを滑らかなちらつきでフェードアウトさせる必要がある場合は、他にもやるべきことがあります。これを実現する 1 つの方法は、キーフレームを変更して各反復で何が起こるかを変更することです。

@keyframes blink-smooth {     50% {         color: transparent     } }.highlight {    animation: 1s blink-smooth 3;}

これは私たちが望んでいた結果のように見えます。ただし、アニメーションでは色の変化を示すことはできませんが (時間関数が進行するときの色と不透明度の特定の遷移を区別するのが難しいため)、アニメーションはすべて加速され、一部のアニメーションでは不自然に見える可能性があることを覚えておくことが重要です(たとえば、脈動アニメーションなど)。この場合、ツールを取り出してアニメーションの方向を扱うことができます。

アニメーションディレクションの唯一の目的は、アニメーションの方向を設定することです。その機能は、偶数回ではアニメーションを順方向に再生し、奇数回では逆方向にアニメーションを再生することです。この機能は非常に強力で、よりリアルなアニメーションを実現できます。これを次のようなちらつきアニメーションで使用してみることができます:

@keyframes blink-smooth {     to {         color: transparent         }     }.highlight {    animation: .5s blink-smooth 6 alternate;}

「フェードイン」と「フェードアウト」のように、反復回数は 2 の倍数でなければならないことに注意してください。現れるために。同じ理由で、アニメーションの長さも半分にする必要があります。

anmiation-direction には 4 つの値があり、黒から透明への色の遷移は 3 回の反復で発生します。

滑らかなちらつきアニメーション効果をスムーズに実現したい場合は、この時点で何かを考える必要があります。それで、どうすればいいでしょうか？一緒に試してみましょう:

@keyframes blink {     to {         color: transparent     } }.highlight {    animation: 1s blink 3 steps(1);}

しかし、失敗したため、彼に変化は見られません。主な理由は、steps(1) は本質的にsteps(1,end) と同等であるためです。これは、現在のテキストの色から透明な色への移行が最初のステップで発生して終了することも意味します。以下の図に示すように:

したがって、表示されるアニメーションの長さの値は短い時点です。 Steps(1,start) に変更すると、その逆が起こり、最初にアニメーションやちらつきのない透明なテキストが表示されます。

逻辑上下一步应该设置 steps(2) ，设置开始和结束。现在我们可以看到一些闪烁的效果，但在半透明的文本和透明或透明和正常的分别。不幸运的是，我们不能通过 steps() 设置中间值，只能设置开始和结束,唯一的解决办法就是调整动画的关键帧，将其设置为 50% ，如下所示：

@keyframes blink {     50% {         color: transparent     } }.highlight {    animation: 1s blink 3 steps(1); /* or step-end */}