Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen

* {
            Rand: 0;
            Polsterung: 0;
        }

        .container {
            Rand: 300px automatisch;
            Höhe: 400px;
            Breite: 1146px;
            Überlauf: versteckt;
        }

        /* .wickeln */
        .wickeln {
            Position: relativ;
            Breite: 10000px;
            links: 0px;
            Animation: animateImg ease 5s unendlich normal;
        }

        /* Bildgröße*/
        .wrap img {
            Breite: 1146px;
            schweben: links;
            Höhe: 400px;
            Anzeige: Block;
        }

        /* Animation */
        @keyframes animateImg {
            0% {
                links: 0px;
            }

            20% {
                links: -0px;
            }

            40 % {
                links: -1146px;
            }

            60 % {
                links: -2292px;
            }

            80 % {
                links: -3438px;
            }

            100 % {
                links: 0px;
            }
        }

<div Klasse="Container">
        <div Klasse="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>