css3を使用してテキストの印刷効果を実現する方法

序文

多くのWebサイトのトップページでは、ユーザーを惹きつけ、長く滞在してもらうために、いくつかのCSS3アニメーションが使用されています。

効果の例

テキスト印刷.gif

このアニメーション原理を実装します

このアニメーションを実現するには、アニメーション CSS3 キーフレームと組み合わせて要素の幅を変更します。

具体的なコードは以下の通り

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3实现打字机效果</title>
<style>
.example-css3dayin {
        text-align: center;
        font-weight: 700;
        font-size: 60px;
        line-height: 79px;
        background: linear-gradient( 270deg, rgba(198, 141, 255, 0.9) 8.92%, #5685ff 46.17%, #48d6ff 92.17% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        white-space: nowrap;
        animation: animateText 4.7s steps(8) infinite;
        -webkit-animation: animateText 4.7s steps(8) infinite;
}

@-webkit-keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }
    
    @keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }      

    </style>
  </head>
  <body>
       <p class="example-css3dayin">AI智能，引领未来</p>
  </body>
</html>

エフェクトのキーフレームアニメーション

animationアニメーションは、複数のノードを設定することで 1 つまたはグループのアニメーションを正確に制御し、複雑なアニメーション効果を実現するためによく使用されます。

トランジションアニメーションと比較して、animationアニメーションはより多くの変化、より多くの制御、自動再生やその他の効果を実現できます。

アニメーション化にanimationは 2 つの手順が必要です

最初のステップは、最初にアニメーションを定義することです。0% の場合、通常は何も設定しないことをお勧めします。デフォルトは初期スタイルです。

@keyframes 动画名称 {

    0% {

        开始动画

    }

    100% {

        结束动画

    }

}

2 番目のステップでは、定義したアニメーションを有効にするために呼び出す必要があります。どのボックスでアニメーションを呼び出す必要があるか、次の 2 つの必要なプロパティを設定します。

animation-name: 动画名称;

animation-duration: 持续时间（单位是s）

たとえば上のアニメーション

.example-css3dayin {
        // 上面省略
        animation: animateText 4.7s steps(8) infinite;
        -webkit-animation: animateText 4.7s steps(8) infinite;
}

@-webkit-keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }
    
    @keyframes animateText {
        0% {
            width: 0;
        }
        35% {
            width: 8.1em;
        }
        75% {
            width: 8.1em;
        }
        100% {
            width: 0;
        }
   }

0% はアニメーションの開始、100% はアニメーションの完了、アニメーションプロセス全体を完了するためのルールはアニメーションシーケンスです。

アニメーションの定義はfromとによって定義することもできますto。これは次0%と同等です。100%

@keyframesCSSのスタイルはで規定されており、現在のスタイルから新しいスタイルに徐々に変更していく過程をアニメーションと呼びます。

CSS3 アニメーションの共通プロパティ

@keyframes: アニメーションを指定します
animation:animation-play-stateプロパティ。
animation-name:@keyframesアニメーション。（持つ必要があります）。
animation-duration: アニメーションが 1 サイクルを完了するまでにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。（持つ必要があります）。
animation-timing-function: アニメーションのスピードカーブを指定します。デフォルトは「ease」です。
animation-delay: アニメーションの開始時期を指定します。デフォルトは 0 です。単位を記述する必要があります。
animation-iteration-count: アニメーションの再生回数を指定します。デフォルトは 1 です。サイクルはinfinite;
animation-direction: 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「normal」です。alternate逆行
animation-play-state: アニメーションが実行中か一時停止中かを指定します。デフォルトは「running」、サスペンドはですpaused。
animation-fill-mode: アニメーション時間外のオブジェクトの状態を指定します。現状維持forwards、原点回帰backwards

アニメーションタイミング関数

animation-timing-function: linear、アニメーションの速度は最初から最後まで同じです。
animation-timing-function: ease、デフォルト。アニメーションは低速で始まり、速度が上がり、終了する前に遅くなります。
animation-timing-function: ease-in、アニメーションは低速で開始されます。
animation-timing-function: ease-out、アニメーションは低速で終了します。
animation-timing-function: ease-in-out、アニメーションは低速で開始および終了します。
animation-timing-function: steps(ステップ数設定)、指定した時間内で数ステップでアニメーションを完了させます。

CSS3アニメーションの短縮表現

animation: 动画名称  持续时间  运动曲线   何时开始（延时） 播放次数  是否反向播放  动画结束后的状态
animation: name duration timing-function delay iteration-count direction fill-mode
animation: animateText 4.7s steps(8) infinite;

知らせ

アニメーション属性を短縮する場合は、アニメーション名とアニメーション期間を記述する必要があります。その他の属性は記述する必要があり、不要な場合は省略します。アニメーション遅延を記述する場合は、単位 s を記述する必要があり、それが 0 秒であっても、記述する必要があります。

デュレーションとディレイタイムは順番に並んでいます

複数のアニメーションが同時に呼び出される

要素が複数のアニメーションを同時に呼び出す必要がある場合、を 1 つだけ使用しanimation、異なるアニメーションを英語のカンマで区切るだけで済みます。

animation: bear .3s steps(8) infinite;

 animation: move 1s ease forwards;
 // 可以合并到一起使用
 animation: bear .3s steps(8) infinite, move 3s ease forwards;