アニメーションの再生時間を不定数で増加させます

Question

アニメーションの再生時間を不明な数字で増やしたいとします。これは私が持っているものです。

@for $i from 1 through 10 { 
    .rw-words span { 
     animation: rotateWord 27s linear infinite 0s; 
     &:nth-of-type(#{$i}) { 
      animation-delay:$i * 3s; 
     } 
    } 
} 

これは限り点で最大10の項目として動作しますが、私は、各項目のアニメーション時間を長くできるようにする必要がありますが、そこになりますどのように多くのアイテムを知りません。これは、WordPressサイトが投稿をループしているため、10か200かもしれません。

Answer 1

SASSはプレーンなCSSにプリコンパイルされ、後でブラウザで読み込まれ、解析されます。要素の数を取得する可能性はありません。コンパイルされた時点では、要素が不明なためです。

Answer 2

Andes Andradeが言っているように、Sassは純粋なCSSにコンパイルされており、どれくらいの要素を持つことができないのか分かりません。

私には2つの方法があります。

---

最初のものは、意味する「マックスアニメーションのシナリオ」を作ることです、貴社のループでハードコード：@for $i from 0 to 500（500または200）

しかし、あなたは、未使用のCSSの多くで終わることがあり。

---

また、javascriptを使用することもできます。これは、私には最適なオプションです。 あなたが持っているアイテムの数がカウントされ、順序によってはアニメーションの遅延が変更されます（item.style.animationDelay = i * 3）