CSS の入力アニメーションが指定された制限を超えています

Question

入力アニメーションは毎回設定した文字数で停止します。ステートメントを拡張すると壊れます。ステートメントを短くすると、設定された文字数に達するまでステートメントが継続されます。ステップ数 (50) を変更する必要があることはわかっていますが、実際にはそれが停止する数値ではなく、28 で停止します。

@import url('https://fonts.googleapis.com/css2?family=Courier Prime&family=Source Code Pro:wght@200&display=swap');
html {
  最小高さ: 100%;
  オーバーフロー: 非表示;
}

体 {
  高さ: 計算(100vh - 8em);
  パディング: 0;
  マージン: 0;
  色: #FFF;
  フォントファミリー: 'Courier Prime'、等幅;
  背景色: rgb(0, 0, 0);
}

.video-bg {
  位置: 絶対;
  トップ: 0;
  左: 0;
  最小幅: 100%;
  最小高さ: 100%;
  不透明度: 0.5;
}

。ライン {
  位置: 相対的;
  トップ: 75%;
  幅: 24em;
  マージン: 自動;
  ボーダー右: 2px ソリッド #FFF;
  フォントサイズ: 18px;
  テキスト整列: 中央;
  ホワイトスペース: ナラップ;
  オーバーフロー: 非表示;
  変換：translateY(-50);
}

.anim-タイプライター {
  アニメーション: タイプライター 5 秒ステップ (50) 1 秒 1 通常両方、blinkTextCursor 750 ミリ秒ステップ (40) 無限通常。
}

@keyframes タイプライター {
  から {
    幅: 0;
  }
  に {
    幅: 16em;
  }
}

@keyframesblinkTextCursor {
  から {
    ボーダー右の色: 透明;
  }
  に {
    ボーダー右の色: rgb(155, 211, 71);
  }
}

<p class="line anim-typewriter">準備中...</p>

Answer 1

ここで幅パラメータを減らすことで、キーフレームの終了位置を調整できます:

@キーフレーム タイプライター {
  から {
    幅: 0;
  }
  に {
    幅: 16em;
  }
}

幅を 13em に変更すると、文字列の末尾でカーソルが点滅します:

@インポート URL('https://fonts.googleapis.com/css2?family=Courier Prime&family=Source Code Pro:wght@200&display=swap');
html {
  最小高さ: 100%;
  オーバーフロー: 非表示;
}

体 {
  高さ: 計算(100vh - 8em);
  パディング: 0;
  マージン: 0;
  色: #FFF;
  フォントファミリー: 'Courier Prime'、等幅;
  背景色: rgb(0, 0, 0);
}

.video-bg {
  位置: 絶対;
  トップ: 0;
  左: 0;
  最小幅: 100%;
  最小高さ: 100%;
  不透明度: 0.5;
}

。ライン {
  位置: 相対的;
  トップ: 75%;
  幅: 24em;
  マージン: 自動;
  ボーダー右: 2px ソリッド #FFF;
  フォントサイズ: 18px;
  テキスト整列: 中央;
  ホワイトスペース: ナラップ;
  オーバーフロー: 非表示;
  変換：translateY(-50);
}

.anim-タイプライター {
  アニメーション: タイプライター 5 秒ステップ (50) 1 秒 1 通常両方、blinkTextCursor 750 ミリ秒ステップ (40) 無限通常。
}

@keyframes タイプライター {
  から {
    幅: 0;
  }
  に {
    幅: 13em;
  }
}

@keyframesblinkTextCursor {
  から {
    ボーダー右の色: 透明;
  }
  に {
    ボーダー右の色: rgb(155, 211, 71);
  }
}

<p class="line anim-typewriter">準備中...</p>

これは最も簡単な方法ですが、将来的に文字列のサイズを動的に変更する場合は、文字列の長さ (文字数) に基づいて幅を更新する必要があります。