カルーセルバナーの自動回転効果を実現する純粋な CSS

* {
            マージン: 0;
            パディング: 0;
        }

        。容器 {
            マージン:300px 自動;
            高さ: 400px;
            幅: 1146ピクセル;
            オーバーフロー: 非表示;
        }

        /* 。包む */
        。包む {
            位置: 相対的;
            幅:10000ピクセル;
            左: 0px;
            アニメーション: animateImg easy 5s infinite normal;
        }

        /* 画像サイズ*/
        .wrap画像{
            幅: 1146ピクセル;
            フロート: 左;
            高さ: 400px;
            表示: ブロック;
        }

        /* アニメーション */
        @keyframes アニメーション画像 {
            0% {
                左: 0px;
            }

            20% {
                左: -0px;
            }

            40% {
                左: -1146px;
            }

            60% {
                左: -2292px;
            }

            80% {
                左: -3438px;
            }

            100% {
                左: 0px;
            }
        }

<div class="コンテナ">
        <div class="wrap">
            <img src="images/banner1.jpg"alt="" />
            <img src="images/banner2.jpg"alt="" />
            <img src="images/banner3.jpg"alt="" />
            <img src="images/banner4.jpg"alt="" />
        </div>