animationで要素を0.1秒ごとに10pxずつ下にずらすには？

Question

始点と終点の座標を指定し、そのアニメーションを何秒で行うかというのは探せば見つかるのですが、一定時間ごとに要素を移動させていくといったような方法が見つかりません。

javascriptのintervalでできないことはないのですが、
eachで回して１つ１つの要素に対して要素をずらしていっているので要素数が増えると遅くなります。

animationも要素数が増えると重くはなると思いますが、
intervalでeachを回すような力技よりはマシだと思うのでやり方がわかる方がいらっしゃいましたら
教えていただければ幸いです。

よろしくお願いいたします。

Comments

[m.ts10806]

>intervalでeachを回すような力技

ちょっとまずそのコード提示いただけますか？HTMLも一緒に。

[Lhankor_Mhy]

無限に下にずらすのですか？

[Lhankor_Mhy]

ああ、すみません、見落としてました。
終点を決めるのですね。

Answer 1

「始点と終点の座標を指定し」て「要素を0.1秒ごとに10pxずつ下にずらす」ということがしたいことでしょうか。

だとしたら、JSで、始点と終点の距離(px)を取得して、距離 / 10 * 0.1 で所要時間が計算できます。

所要時間をCSS変数で定義しておいてCSSアニメーションの所要時間にその変数を設定します。

JSからCSS変数は設定できるので、上記で計算した所要時間をCSS変数に設定すればどうでしょうか。

Answer 2

CSSのキーフレームアニメーションにするという方法もあります。

Answer 3

概念的すぎて解説しようがありませんが、wokerでやればできそうな気がします