CSSのアニメーションで始値を指定した実装方法

お世話になります。

CSSのアニメーションを利用して、
横にスライドするプログラムを実装しています。

以下のプログラムで、
X値が-100pxから1000pxまでスライドはできたのですが、

これを、ブラウザのリロード時に
Xの始値を例えば100pxに設定して、(Y値は固定

１回目：X値が100pxから1000pxまでスライド
2回目：X値が-100pxから1000pxまでスライド
3回目：2回目の繰り返し
※速度は10sで一定です

の挙動をする実装方法をここ数日、探しております。

探した結果として、
Javascriptを利用してロード時に
style属性に代入するのかと思いましたが、
具体的な書き方が分からず、また合っているか分からないため
ここに質問しました。

質問した結果、
Javascriptを利用したロード時のstyle属性で
方向性が合っていそうなので
Javascriptのコードを書きました。

発想は、ページロード時に
①現在のtransformの値を取得して、
②translateXの値に200pxを加算
です。

①はできました。「matrix(1, 0, 0, 1, -100, 50)」。
②が分からなく、どのようなコードを書けば、
①で取得した値のtranslateXに加算できるのでしょうか。

アドバイスをいただけないでしょうか。
よろしくお願い致します。

html
1<section>
2<div id="node1">みどり</div>
3</section>

css
1#node1 {
2animation: anm1 10s;
3animation-iteration-count:infinite;
4}
5@keyframes anm1 {
60% {
7transform: translate(-100px,50px);
8}
9100% {
10transform: translate(1000px,50px);
11}
12}

javascript
1<script>
2  let box = document.getElementById("anm1");
3  let get_original_value = window.getComputedStyle(box, null).getPropertyValue('transform');
4  alert(get_original_value);
5  box.style.transform = 'translateX(200px)';
6</script>
7
8matrix(1, 0, 0, 1, -100, 50)

m.ts10806

2021/01/21 22:13

タグにJavascriptがあるのはどういう理由でしょうか

退会済みユーザー

2021/01/21 22:36 編集

解決方法として、Javascriptを利用した方法があるのでは？と思いタグを付けましたが、間違った利用方法でしたら削除いたしますので、お手数ですが、教えていただけないでしょか。いちお追加で編集しました。

m.ts10806

2021/01/21 22:32

>Javascriptを利用してリロード時に style属性に考え方の方向性は合ってると思います。「イベントの取得」とかでキーワード分解して調べて素材集めていけばご自身でももっと進められそうに思いますよ

退会済みユーザー

2021/01/21 22:38

ありがとうございます。方向性が間違っていないというだけでも良かったです。このまま実装に向けて自分自身でも進めてまいります。

行動規範の内容に同意します

回答1件

ベストアンサー

animation-delayにマイナス値を設定すれば、開始値を進めることができます。

css
1.node1 {
2  animation: anm1 10s linear;
3  animation-delay: -1.89s;
4  animation-iteration-count: infinite;
5}

1.89sは下記のように計算します。
-100pxから1000pxまでなので移動距離は1100px
100pxが開始位置ということは、200px移動した地点
10s * (200 / 1100) = 1.888・・・

一括指定で記述すると、

css
1.node1 {
2  animation: anm1 10s linear -1.89s infinite;
3}

animation-timing-function を初期値(ease)で、開始時もease-inで開始したい場合は、複数アニメーションを設定するいいでしょう。カンマで区切って記述すると複数のアニメーションを設定できます。

css
1.node1 {
2  animation: anm0 8.11s, anm1 10s 8.11s infinite;
3}
4@keyframes anm1 {
5  0% {
6    transform: translate(-100px,50px);
7  }
8  100% {
9    transform: translate(1000px,50px);
10  }
11}
12@keyframes anm0 {
13  0% {
14    transform: translate(100px,50px);
15  }
16  100% {
17    transform: translate(1000px,50px);
18  }
19}