CSSアニメーションスライダーを使って、スライド画像3分割の状態をブラウザ幅を変えても均等にしたい【コードあり】

以下の続きの質問になります。

どのブラウザ幅でも「理想の状態」の画像のようにしたいのですが、現状のコードであるcssアニメーションの修正（margin-leftのあたり）でも実現可能でしょうか。

理想の状態（どの画面幅でもこのようにしたい）

囲みのwidthを100%

画面幅を変えた場合

アニメーションのmargin指定のみで、3分割均等（画像の1枚目）のようにすることはできますでしょうか。

css
10% {
2        /* margin-left: -200px; */
3        margin-left: 33%;
4      }
5
6      100% {
7        /* margin-left: -600px; */
8        margin-left: -60%;
9      }

全体のコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div * {
      box-sizing: border-box;
    }

    div {
      width: 800px;
      /* width: 100%; */
      height: 200px;
      overflow: hidden;
      margin: 0 auto;
      border: 2px solid orange;
    }

    ul {
      white-space: nowrap;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    ul li {
      display: inline-block;
      width: 400px;
      /* min-width: calc(100% / 3); */
      /* min-width: 33.333%; */
      height: 200px;
      margin: 0;
      padding: 0;
    }

    li:first-of-type {
      animation-name: expansion;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-delay: 3s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: backwards;
      animation-play-state: running;
    }

    @keyframes expansion {

      0% {
        margin-left: -200px;
      }

      100% {
        margin-left: -600px;
      }
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li class="slide-list-item"><img src="https://placehold.jp/400x200.png?text={1}" alt=""></li>
      <li class="slide-list-item"><img src="http://placehold.jp/cc9999/993333/400x200.png?text={2}"" alt=""></li>
      <li class=" slide-list-item"><img src="https://placehold.jp/400x200.png?text={3}" alt=""></li>
      <li class="slide-list-item"><img src="http://placehold.jp/cc9999/993333/400x200.png?text={4}"" alt=""></li>
  </ul>
</div>

<script src=" ./teratail.js"></script>
</body>

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

回答1件

ベストアンサー

こんにちは。

全部パーセンテージで書きなおしては？

css
1    div {
2      width: 100%;
3      /*width: 800px;*/
4      /* width: 100%; */
5      /*height: 200px;*/
6      overflow: hidden;
7      margin: 0 auto;
8      border: 2px solid orange;
9    }
10
11/* 略 */
12
13    ul li {
14      display: inline-block;
15      width: 50%;
16      /*width: 400px;*/
17      /* min-width: calc(100% / 3); */
18      /* min-width: 33.333%; */
19      /*height: 200px;*/
20      margin: 0;
21      padding: 0;
22    }
23
24
25/* 略 */
26
27
28    img {
29      width: 100%;
30    }
31
32    @keyframes expansion {
33
34      0% {
35        margin-left: -25%;
36        /*margin-left: -200px;*/
37      }
38
39      100% {
40        margin-left: -75%;
41        /*margin-left: -600px;*/
42      }
43    }