div要素のブロックを上下にふわふわさせながら、横方向に無限にスクロールさせるアニメーションを作りたい

Question

div要素のブロック複数をランダムで配置させて、個々のブロックを上下にふわふわさせながら、横方向に無限にスクロールさせるアニメーションを作りたいです。

class=fuwafuwa
に、ふわふわするアニメーションと、ループ用のアニメーションを,でつなげて記述すると後ろのloopしか動作しません。

上下に動く動作と横に移動する動作を同時にさせる方法がわからず困っています。

<div class="logo">
  <div class="fuwafuwa1"></div>
</div>
<div class="logo">
  <div class="fuwafuwa2"></div>
</div>
<div class="logo">
  <div class="fuwafuwa3"></div>
</div>


.fuwafuwa1 {
  -webkit-animation:fuwafuwa1 3s infinite linear alternate, loop 50s -25s linear infinite;
  animation:fuwafuwa1 3s infinite linear alternate, loop 50s -25s linear infinite;
}
.fuwafuwa2 {
  -webkit-animation:fuwafuwa2 2s infinite linear alternate, loop 50s -25s linear infinite;
  animation:fuwafuwa2 2s infinite linear alternate, loop 50s -25s linear infinite;
}
.fuwafuwa3 {
  -webkit-animation:fuwafuwa3 1s infinite linear alternate;
  animation:fuwafuwa3 1s infinite linear alternate;
}

.loop {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}

@-webkit-keyframes fuwafuwa1 {
  0% {-webkit-transform:translate(0, 0) rotate(0deg);}
  50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
  100% {-webkit-transform:translate(0, 0)rotate(0deg);}
}

@keyframes fuwafuwa1 {
  0% {transform:translate(0, 0) rotate(0deg);}
  50% {transform:translate(0, -10px) rotate(0deg);}
  100% {transform:translate(0, 0)rotate(0deg);}
}

@-webkit-keyframes fuwafuwa2 {
  0% {-webkit-transform:translate(0, 0) rotate(0deg);}
  50% {-webkit-transform:translate(0, 5px) rotate(0deg);}
  100% {-webkit-transform:translate(0, 0)rotate(0deg);}
}

@keyframes fuwafuwa2 {
  0% {transform:translate(0, 0) rotate(0deg);}
  50% {transform:translate(0, 10px) rotate(0deg);}
  100% {transform:translate(0, 0)rotate(0deg);}
}

@-webkit-keyframes fuwafuwa3 {
  0% {-webkit-transform:translate(0, 0) rotate(0deg);}
  50% {-webkit-transform:translate(0, 3px) rotate(0deg);}
  100% {-webkit-transform:translate(0, 0)rotate(0deg);}
}

@keyframes fuwafuwa3 {
  0% {transform:translate(0, 0) rotate(0deg);}
  50% {transform:translate(0, 6px) rotate(0deg);}
  100% {transform:translate(0, 0)rotate(0deg);}
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

// 素材のランダム配置
function randomImages(id) {

  // 関数の引数に設定したid要素を変数に代入
  var box = $(id);

  // 画像配列
  var imageList = [
    's01',
    's02',
    's03',
  ];

  var width = window.innerWidth;
  var height = window.innerHeight;
// 配列の数だけ繰り返し処理
  for ( var i=0; i<imageList.length; i++) {

    // 縦横軸用の乱数生成
    var x = width * (Math.floor(Math.random() * 100) / 100);      // 画像位置　top:x
    var y = height * (Math.floor(Math.random() * 100) / 100);      // 画像位置　left:y
    var w = Math.floor(Math.random() * 100) + 90; // 画像サイズwidth　ランダム値に100px加算
    var f = Math.floor(Math.random() * 3) + 1;        // fuwafuwa randomu

    // sp
    if (matchMedia('(max-width: 960px) and (orientation: portrait)').matches) {
      // ウィンドウサイズが960px以下かつ縦向きのとき
      w = w * 0.7;
    }

    // box要素にimgタグを追加（乱数を代入した変数をポジションに設定）
    box.append('<div class="logo" style="top:'+y+'px; left:'+x+'px;"><img src="/img/sdgs/'+imageList[i]+'.svg" class="pc-home-img fuwafuwa'+f+'" alt="" style="width:'+w+'px;"></div>');
  }
}

Comments

[yambejp]

「ふわふわ」は3のイメージですか？
「無限ループ」とはどうするのでしょうか？

[YuriY]

質問ありがとうございます。
実際には

fuwafuwa1,fuwafuwa2,fuwafuwa3

それぞれふわふわぐあいを変えたCSS設定があって
ランダムで付与するようにしています。

１・２と３で記述が異なっているのは実験で、書き方を変えて動くか見ているからでした。

無限ループは

https://qiita.com/4cres/items/8ee3306a15f1d99b976f

上記のページを参考に、

@keyframes loop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

をそれぞれ付与すればいいのではないかと考えた次第です。

[yambejp]

jsでもいいんですよね？
ふわふわはsinカーブとか使っていいですか？

[YuriY]

ありがとうございます。
jsで問題ありません。

Answer 1

こんな感じでどうでしょうか？

Comments

[yambejp]

//html+css
<style>
.fuwa{
position:absolute;
}
</style>
<div id="hoge" class="fuwa">hoge</div>
<div id="fuga" class="fuwa">fuga</div>
<div id="piyo" class="fuwa">piyo</div>

[yambejp]

//js
window.addEventListener('DOMContentLoaded', ()=>{
const speed=50;
const winW=document.querySelector('body').offsetWidth;
const hoge={
dom:document.querySelector('#hoge'),
height:30,
top:20,
width:document.querySelector('#hoge').offsetWidth,
left:0,
add:10,
};
const fuga={
dom:document.querySelector('#fuga'),
height:50,
top:70,
width:document.querySelector('#fuga').offsetWidth,
left:0,
add:18,
};
const piyo={
dom:document.querySelector('#piyo'),
height:80,
top:100,
width:document.querySelector('#piyo').offsetWidth,
left:0,
add:23,
};

var timerId=setInterval(()=>{
[hoge,fuga,piyo].forEach(x=>{
x.dom.style.left=x.left;
x.dom.style.top=Math.sin(x.left/x.add)*x.height+x.top;
x.left+=x.add;
if(x.left>winW-x.width) x.left=0;
});
},speed);
});

[YuriY]

ありがとうございます！
解決いたしました。