シーケンス内の各行に CSS ベースの入力アニメーションを作成する

Question

rree リーリー

私がやりたいのは、入力アニメーションを使用してユーザーにテキストを 1 行ずつ上から下に表示することです。多くのことを試しましたが、keyframe 要素ごとに異なる p.text を定義する以外の解決策が見つかりません。 p.text 要素が 17 個あるため、コードはスパゲッティのように見えます。私は何をしますか？

この問題の codepen リンクは次のとおりです: https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

各行に手動で遅延を適用する必要があります。 SCSS の場合、これを行うコード スニペットの例は、@for ループを使用し、インデックスにアニメーションの継続時間を乗算することです。

リーリー

もちろん、完璧なタイミングを実現するには追加の調整が必要になりますが、この問題を解決する方法の大まかなアイデアは得られるはずです。

アニメーションの状態も both に設定されていることを確認してください。これにより、テキストは最初は非表示になり、アニメーションが終了した後も表示されたままになります。

＃＃＃編集：＃＃＃

JavaScript を使用して、次のようにアニメーションの遅延を設定することもできます:

リーリー