CSS 秘密の花園: テキストアニメーション_html/css_WEB-ITnose

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

質問

テキスト入力のアニメーション効果、つまりテキストが 1 つずつ表示される様子をシミュレートしたい場合があります。このアニメーション効果は、テクノロジー Web サイトで特に人気があります。正しく使えば、あなたのウェブサイトの効果は直接的に別のレベルに引き上げられます。

通常、このような効果を実現するには、複雑な JavaScript スクリプトが必要です。これは単なるデモンストレーションですが、CSS を使用してそのような効果を実現するのは夢物語です。どのようにしてそれが可能でしょうか?

CERN の公式 Web サイトでは、このアニメーション効果が使用されています。

解決策

このアニメーションを実装するアイデアは、テキストを含む要素の幅を 0 から (文字ごとに) 要素コンテンツの幅までゆっくりと移行させることです。おそらく、このアプローチには限界があることに気づいているでしょう。それは、複数行のテキストでは機能しないということです。ありがたいことに、ほとんどの場合、このアニメーション効果はタイトルなどの 1 行のテキストにのみ使用されます。

もう 1 つ注意すべき点は、アニメーションの効果は時間の経過とともに弱くなるということです。アニメーションの継続時間が短いほど、アニメーション効果は向上し、ユーザー エクスペリエンスは向上します。アニメーションの継続時間が長いほど、アニメーション効果はユーザーを退屈に感じさせます。要約すると、たとえこのテクノロジが長いテキストでの使用を可能にしているとしても、複数行のテキストでの使用は避けるべきです。

コードの作成を開始しましょう。

のタイトルにこの効果を使用し、テキストに固定幅フォントを設定するとします。

<h1>CSS is awesome!</h1>

幅を 0 からタイトル コンテンツの幅に遷移させる単純なアニメーションを追加できます。

@keyframes typing {    from { width: 0 }}h1 {    width: 7.7em; /* Width of text */    animation: typing 8s;}

これは完全に理にかなっていますね。ただし、以下の画像でわかるように、これは失敗したエフェクトであり、必要なものではありません:

問題はもうお分かりかもしれません。幅が増えて行数が 1 になったときにテキストが折り返されるのを防ぐために、white-space:nowrap; を使用したことを思い出してください。次に、overflow:hidden; を使用してオーバーフロー テキストをインターセプトします。これらの問題を解決すると、次の図に示すように、アニメーションは必要なもののようになります。

• 明らかな問題は、アニメーションはスムーズですが、キャラクターによって異なります。登場人物。
• それほど明白ではない問題は、これまでのところ、幅の単位として px の代わりに em が使用されているということです。em は px よりも優れていますが、それでもうまく機能しません。では、7.7em という幅はどこから来たのでしょうか?どのように計算されますか?

最初の問題の解決は、前に紹介したフレーム単位のアニメーションやフリッカー アニメーションと同様に、steps() で処理できます。残念ながら、必要なステップは文字列の文字数ですが、ダイナミック テキストではまったく不可能です。ただし、後で説明するように、これは JavaScript コードの小さな部分を使用して可能です。

2 番目の問題を解決するには、ch 単位を使用できます。ch 単位は、CSS3 で新しく導入された単位であり、1ch のサイズは文字 o の幅と同じです。新しい単位に関して最も知られていないことの 1 つは、要素の幅が文字の幅に相対的であるかどうかは、ほとんどの場合、あまり気にならないことです。ただし、等幅フォントは特殊なタイプのフォントです。等幅フォントの各文字の幅は文字「o」と同じです。したがって、この例の幅は 15 文字の ch 幅です。

これらを以下のようにまとめます:

<h1>CSS is awesome!</h1>@keyframes typing {    from {       width: 0;     }}h1 {    width: 15ch; /* Width of text */    overflow: hidden;    white-space: nowrap;    animation: typing 6s steps(15);}

上でわかるように。これで、ようやく予想通りのアニメーション効果が表示されます。テキストが 1 文字ずつ表示されます。しかし、まだ完璧ではありません。何か足りないものはありますか?

最後にもう 1 つ効果があり、文字の後ろに点滅するカーソルを追加します。前のセクションでは、まばたきアニメーションを作成する方法を学びました。疑似要素を使用して点滅するカーソルを作成し、不透明度属性を使用することもできます。もちろん、この例では、右の境界線が代わりに使用されます。

@keyframes typing {    from { width: 0 }}@keyframes caret {    50% { border-color: transparent; }}h1 {    width: 15ch; /* Width of text */    overflow: hidden;    white-space: nowrap;    border-right: .05em solid;    animation: typing 6s steps(15),caret 1s steps(1) infinite;}

表示されるアニメーションはテキストとは異なり、カーソル文字が連続的に点滅する必要があります（すべての文字が表示される場合でも）。したがって、アニメーションを無限に再生するには、アニメーションに無限のキーワードを設定します。同時に、境界線の色は指定せず、主に文字の色を自動的に取得させます。下の図に示すように:

これで、アニメーション作業は比較的完璧になりましたが、メンテナンスはそれほど簡単ではありません。異なる文字数に応じて、タイトルに異なるスタイルを設定する必要があります。コンテンツ。ただし、このタスクは JavaScript コードを使用して完全に完了できます:

$$('h1').forEach(function(h1) {    var len = h1.textContent.length, s = h1.style;    s.width = len + 'ch';    s.animationTimingFunction = "steps("+len+"),steps(1)";});

これらの数行の JS コードだけで、必要なアニメーション効果を実現できるだけでなく、コードの保守も簡単です。

注: 次の JS コードを使用することもできます:

var aH1 = document.getElementsByTagName('h1');for(var i = 0, len = aH1.length; i < len; i++){    var textLen = aH1[i].textContent.length, s = aH1[i].style;    s.width = textLen + 'ch';    s.animationTimingFunction = "steps("+textLen+"),steps(1)";}

これは良いことですが、ブラウザーが CSS アニメーションをサポートしていない場合はどうなりますか?基本的に、ブラウザが認識するすべての CSS アニメーション関連のものは無視されます:

h1 {    width: 15ch; /* Width of text */    overflow: hidden;    white-space: nowrap;    border-right: .05em solid;}

浏览器不支持动画效果，会降级处理，上面的是支持 ch 效果，下面的是不支持 ch 单位的效果

正如上图所看到的，效果好不好主要取决于浏览器是否支持 ch 单位。如果你想避免底部那个效果，你可以通过 em 做降级处理。如果你不希望光标字符在最后，你可以改变光标字符动画中关键帧中的 border 属性，这样你只会看到一个透明的边框，如下：

@keyframes caret {    50% { border-color: currentColor; }}h1 {    /* ... */    border-right: .05em solid transparent;    animation: typing 6s steps(15),caret 1s steps(1) infinite;}