CSS animationで複数行あるスライダーをうまくループさせたい

###前提・実現したいこと

複数行のスライダーを作成しています。
以下のような感じです。

← スクロールしていく
■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■
※■は画像です。

今までJQuery（SimplyScroll）でアニメーションをつけていたのですが、
スマホ（特にアンドロイド機種）になると動きがスムーズでは
なかったり、止まってしまったりとあまり良くありませんでした。

そこで、CSSのanimationプロパティを使ってスライダーを作成してみたところ
動きはスムーズにいき、途中までは良いのですが、
当然と言えば当然なのですが、最後の方になりますと隙間が大きく空いてしまいます。
（背景であればリピートできるのですが・・・）

＿　　　　　↓　隙間が大きく空いてしまう。　
■ ■ ■ ■ 　　　｜
■ ■ ■ ■ 　　　｜
■ ■ ■ ■　　　｜
＿　　　　　　　 ↑　実際の画面幅

以下にデモを作成してみました。
https://jsfiddle.net/jn46Laho/10/

実現したいこととして、

1.後ろにできれば隙間なく（多少はあっても大丈夫です。）、ループさせる
2.もしくは、右端までスクロールしたら逆方向にスクロールさせる（行ったり来たりするような）

上記のどちらかをうまくできないでしょうか？

← スクロールしていく
■ ■ ■ ■ ■ ■ ■ ■ ■｜
■ ■ ■ ■ ■ ■ ■ ■ ■｜
■ ■ ■ ■ ■ ■ ■ ■ ■｜
＿　　　　　　　　　　 ↑右端。ここまで来たらピタッと止まって逆へスクロールしていく

リバースして、

スクロールしていく →
｜■ ■ ■ ■ ■ ■ ■ ■ ■
｜■ ■ ■ ■ ■ ■ ■ ■ ■
｜■ ■ ■ ■ ■ ■ ■ ■ ■
↑左端までまで来たらピタッと止まって右へスクロールしていく

ちなみに画像の数は30。200px幅の要素を3行の10列で並べています。
widthは2000pxで上にoverflow:hiddenをかけています。
また、ブレイクポイントは768pxでかけていますが、
レスポンシブ時にもそのまま表示しても大丈夫なため、
とにかく隙間の改善もしくは画面幅にぴったりくるようにしたいです。

###該当のソースコード
【テストHTML】

<div id="posts">
<div class="slidethis">
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>

【CSS】トライ1（流れていくだけ）

#posts ul li {
  display: inline-block;
  width: 194px;
  height: 150px;
  margin-bottom: 4px;
  background: #f0f0f0;
  list-style: none;
}
#posts .slidethis {
  position: relative;
  height:592px;
  overflow: hidden;
}

#posts .container {
  width: 2000px;
}

#posts .slidethis .container {
  position: absolute;
	top: 0;
  animation: move 45s linear 0 ;
  -webkit-animation:move 45s infinite linear;
  animation:move 45s infinite linear;
}
#posts .slidethis .container:hover {
  animation-play-state: paused;
}

@keyframes move{
    from{
        -ms-transform:translateX(0);
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    to{
        -ms-transform:translateX(-1600px);
        -webkit-transform:translateX(-1600px);
        transform:translateX(-1600px);
    }
}

【CSS】トライ2（行ったり来たり）

  display: inline-block;
  width: 194px;
  height: 150px;
  margin-bottom: 4px;
  background: #f0f0f0;
  list-style: none;
}
#posts .slidethis {
  position: relative;
  height:592px;
  overflow: hidden;
}

#posts .container {
  width: 2000px;
}

#posts .slidethis .container {
  position: absolute;
	top: 0;
  animation: move 45s linear 0 ;
  -webkit-animation:move 45s infinite linear;
  animation:move 45s infinite linear;
}
#posts .slidethis .container:hover {
  animation-play-state: paused;
}

@keyframes move{
 0% { left:0; }
 25% { left: -100%;}
 50% { right: 0;}
 100% { right: -100%;}
}

keyframesの数値をいろいろ変更したりもして試行を繰り返しているのですが、
良い解決策にたどり着けずにおります。
よろしくお願いします。

###追記
すみません、いろいろ考えたのですが、
CSSのみで実現するのはやはり難しいのでしょうか？
レスポンシブで画像サイズを変更する等はないので、
そのまま流しっぱなしではありますが、
やはりブレイクポイント毎に計算して幅を調整する
必要があるのでしょうか？
有識者の皆さま、何卒ご教授いただけますよう、
よろしくお願い致します。

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

回答2件

CSSで解決いたしました。
レスポンシブ対応の複数行スライダー（といってもheightは固定）の実装において、
PC時は往復、スマホ時にはループにいたしました。

以下の点を留意いたしました。

１．PCでは表示領域を決める

→1カラムで横断するようなPCデザインの場合、translateXが大きくなりすぎてしまうため隙間が出たりしてしまうため、表示領域を決めてその中で往復するようにいたしました。

２．スマホ時にはブレイクポイントを複数作って対応

３．その際のiphoneエラーに対応

→タップ（リンク）が入るとiphoneでエラー（タップした後に戻るとスライダーが切れたように表示されなくなる）が発生。
position:fixedで回避いたしました。

という流れで解決することができました。

ありがとうございました！

投稿2018/01/12 01:10

lingwood

総合スコア40

ベストアンサー

animation-direction: alternate;
で往復は解決します。隙間が大きく開くのは-1600pxが大きすぎるからです。

css
1#posts .slidethis .container {
2  position: absolute;
3	top: 0;
4  /*せっかちだったので早めた*/
5  animation: move 10s linear 0 ;
6  -webkit-animation:move 10s infinite linear;
7  animation:move 10s infinite linear;
8  /*ここ*/
9  animation-direction: alternate;
10}
11#posts .slidethis .container:hover {
12  animation-play-state: paused;
13}
14
15@keyframes move{
16    from{
17        -ms-transform:translateX(0);
18        -webkit-transform:translateX(0);
19        transform:translateX(0);
20    }
21    to{
22        /*少し詰めた*/
23        -ms-transform:translateX(-1400px);
24        -webkit-transform:translateX(-1400px);
25        transform:translateX(-1400px);
26    }
27}

投稿2018/01/05 09:39

sousuke

総合スコア3828

lingwood

2018/01/06 00:24

sousuke　様おはようございます。昨日はご回答ありがとうございました。会社からでしたので帰宅してしまい、返信できず失礼いたしました。往復の件ですが、すみません、一応はできていたのですが、上のCSSにalternateが入っていませんでした。いろいろいじっているうちに消してしまったものをコピペしたみたいで、失礼いたしました。いずれに、どうしても隙間が気になってしまい、 left:0、right:0等でぴったりとできないか等の試行を重ねているのですが、ググってみましたところleft、rightは効かない？みたいでしたので途方に暮れていました。 -1600pxが大きすぎるとのことで詰めるのも考えたのですが、やはりブレイクポイント毎に計算してサイズを調整してあげるしかないのでしょうか・・・？

lingwood

2018/01/12 00:48

sousuke　様こちらにもご回答いただいてくださってありがとうございました！ javascriptの書き換えの件でもご回答を寄せていただき、本当にうれしかったです！！本件とJSの件は同じ箇所の問題に対するもので、 sousukeさんのこちらのアドバイスをヒントに何とかCSSで解決を図りました。またの際にも何卒よろしくお願い致します。