cssのtranslateを使って移動の増分指定はできないのでしょうか

ブラウザ内でCSSアニメーションを動かそうとしています。
ブラウザの左端から小さな画像が現れて、ぴょんぴょん跳ねながらブラウザ右端までたどり着いたら、また左端から現れるの繰り返し…というものを作ろうとしているのですが、translateの移動で行き詰まりました。

CSS
1.anime {
2  position: absolute;
3  left: 0;
4  top: -70px;
5  animation: jump 2s infinite cubic-bezier(0.42,0,0.58,1.0);
6}
7@keyframes jump {
8  0% {
9    transform: translate(0px,0px) scale(.7) rotate(-70deg);
10  }
11
12  50% {
13    transform: translate(50px,-50px) scale(1) rotate(0deg);
14  }
15
16  100% {
17    transform: translate(100px,0px) scale(.7) rotate(70deg);
18  }
19}

このCSSだと、現場でずーっと跳ねているだけで、ブラウザの右端まで動きません。1回目アニメーションはX軸0pxから始まって100pxで終わるのですが、例えば2回目は150pxから始まって250pxで終了、3回目は300pxから400pxで終了…という感じで、ブラウザ右端まで行きたいのですが、CSSで可能なのでしょうか。「translate」「増分指定」などで検索してみたものの、思い描くものを拾えない状況です。
positionとかでできるのかなと思ったのですが、パフォーマンスが悪いのでおすすめではないと書いてあるページをいくつか見ましたので、positionじゃないほうがいいのかなと思っています。

何かヒントになる情報をご存知の方がいらしたら、ぜひ教えていただけると助かります。参考URL等でも結構です。
よろしくお願いいたします。

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

回答2件

自分だったら要素を入れ子にして横移動を管理するものと上下移動とスケールを管理するものに分けると思います。
ひとつの要素でも可能だとは思いますがkeyframesが複雑になるので避けます。
yukikoさんのアニメーションを元に考えると、

translateX値が0〜100%にアニメーションする（横移動を管理する）要素A
要素Aの中にscale値とtranslateY値がアニメーションする（上下移動とスケールを管理する）要素B

という風に分けます。
このようにすると求められている、

ブラウザ右端までたどり着いたら、また左端から現れるの繰り返し

という動きが再現出来るかと思います。
デモを作りましたのでご参考までに。

https://jsfiddle.net/6agxqrur/

投稿2017/06/17 16:30

srmtyj

総合スコア51

yukiko

2017/06/18 07:18

ありがとうございます。求めていたのはこんな動きです。 X軸とY軸を入れ子にして動かすとか、全く思いつきませんでした。お二方をベストアンサーにしたいのですが、多分機能的にできなそうなので…ごめんなさい。でもありがとうございました。実際に動くところをURLで見せていただいて、とても参考になりました。

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

ベストアンサー

増分ってなると、CSSではできなかったと思います。どうしても行いたければ以下のように
親要素を駆使するとかになるでしょうか。

CSS
1/*
2アニメーションする領域
3アニメーションによるスクロールバー抑制のため
4*/
5.animeField{
6    overflow: hidden;
7    width: 100%;
8    position: relative;
9    min-height: 100px;
10}
11/*
12親要素で横移動をする
13*/
14.wrapAnim{
15    width: 100%;
16    position: relative;
17    /*
18   右から左に行くまでに何回バウンドさせたいか。
19   4回なら子要素が2秒なので8秒かけて横移動
20   横移動は等速移動してほしいので、linear
21  */
22    animation: slid 8s infinite linear;
23}
24/*
25子要素は繰り返し上下するだけ
26*/
27.anime {
28    position: relative;
29    left: 0;
30    top:50px;
31    background: blue;
32    width: 50px;
33    height: 50px;
34    animation: jump 2s infinite cubic-bezier(0.42,0,0.58,1.0);
35 }
36@keyframes jump {
37    0% {
38        transform: translateY(0px) scale(.7) rotate(-70deg);
39    }
40
41    50% {
42        transform: translateY(-50px) scale(1) rotate(0deg);
43    }
44
45    100% {
46        transform: translateY(0px) scale(.7) rotate(70deg);
47    }
48
49}
50@keyframes slid {
51    0%{
52
53        transform: translateX(0) ;
54    }
55    100%{
56        transform : translateX(100%);
57    }
58}

html
1<!-- アニメーション表示領域 -->
2<div class="animeField">
3    <!-- 横移動する親要素 -->
4    <div class="wrapAnim">
5        <!-- 縦移動する要素 -->
6        <div class="anime">
7        </div>
8    </div>
9</div>

投稿2017/06/17 16:35

kanimaru

総合スコア1013

yukiko

2017/06/18 07:15

なぜこんな頭のいいことを思いつくのでしょうか！思ったことができました。ありがとうございますm(__)m スクロールバー抑制のためというのも、最初、なんのことだろう？と思ったのですが、.animeFieldなしで作ったときに、意味がわかりました。.animeFieldがないと横スクロールバーが出るのですね。プログラム（CSSはプログラムとは言わないかもですが）が動くと楽しいですね。ほんとにありがとうございますm(__)m