CSS連続アニメーション

Question

次の CSS コードがあります。 問題は、アニメーションは希望どおりに動作しますが、10 秒が経過するとリセットされ、見た目が醜いことです。理想的には、再起動する代わりに画像をラップし、画像の左側がキャンバスから出たときに右側から戻ってくる無限アニメーションを実現したいと考えています。

@keyframes スクロール右 {
  0% {
    背景位置-x: 30%;
  }
  
  100% {
    背景位置-x: 130%;
  }
}

.onrir {
  背景画像: url('./text.svg');
  背景リピート: リピートなし;
  背景サイズ: カバー;
  背景位置: 中央;
  -webkit-text-fill-color: 透明;
  -webkit-background-clip: テキスト;
  -webkit-text-ストローク: 0.8px #fff;
  フォントサイズ: 10rem;
  行の高さ: 100%;
  背景サイズ: 120% 120%;
  背景位置: 30% -30%;

  アニメーション: スクロール右 10 秒の無限直線前進。
}

これをキーフレームの外で実装する方法がわかりません。

編集: html tailwind コードとこれ。

<h1 class="font-bold text-center text-white">
        <span class="onrir xs text-transparent bg-clip-text"> 私は誰ですか? </span>
</h1>

Answer 1

アニメーションが開始時と同じ位置で終了するようにする必要があります...

100% を 50% に変更し、100% (0% と同じ) を追加します。 (元の持続時間に合わせて、アニメーションの持続時間を 2 倍します)。
(未テスト (正確に再現できません) ですが、動作するはずです)

@keyframes スクロール右 {
  
  0% {
    背景位置-x: 30%;
  }
  50% {
    背景位置-x: 130%;
  }
  100% {
    背景位置-x: 30%;
  }
}

.onrir {
  背景画像: url('./text.svg');
  背景リピート: リピートなし;
  背景サイズ: カバー;
  背景位置: 中央;
  -webkit-text-fill-color: 透明;
  -webkit-background-clip: テキスト;
  -webkit-text-ストローク: 0.8px #fff;
  フォントサイズ: 10rem;
  行の高さ: 100%;
  背景サイズ: 120% 120%;
  背景位置: 30% -30%;

  アニメーション：scrollRight 20 秒の無限直線前進。
}

デモ: (これがあなたが言及しているものであることを願っています)

*{
パディング:0;
マージン:0;
}

.スムーズ、.ジャンプ{
    幅: 100ピクセル;
    高さ: 100ピクセル;
    背景: 赤;
    位置: 相対的;
    フォントサイズ: 2rem;
    テキスト整列: 中央;
}
.ジャンプ{
    アニメーション: 2 秒間無限にジャンプします。
}
。スムーズ{
    アニメーション: スムーズ 4 秒、無限。
}

@keyframes ジャンプ{
  0%{
    左: 0px;
  }
  100%{
    左: 200ピクセル;
  }
}
@キーフレームスムーズ{
  0%{
    左: 0px;
  }
  50%{
    左: 200ピクセル;
  }
  100%{
    左: 0px;
  }
}
。キャンバス{
  位置: 絶対;
  左: 100ピクセル;
  幅:100ピクセル;
  高さ:250ピクセル;
  背景: ライトグレー;
  不透明度: 0.5;
    z インデックス: 1;

}

<div class="canvas"></div>
<div class="ジャンプ">ジャンプ</div>
<div style="height:50px"></div>
<div class="smooth">smooth</div>