ブラウザ内で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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/18 07:18