White against the war diary --css do to enhance Carousel Figure (super-simple)

When we design web pages, often use Carousel Figure design, under normal circumstances would use js, do so out of relatively cool special effects. But for some simple Web page, simple carousel showing effects with css, it is very convenient.
Look at the rookie, the veterans are free! ! ! ! ! ! ! ! !
See the figure ↓↓↓

fancy map,
black is the outermost layer of the container, that is, we can see the area (beyond the set area is not visible overflow: hidden),
red container used to hold we need to rotate the picture, and the height of the parent container the same, according to the needs of their own settings (add flexibility to allow images arranged horizontally)
blue box indicates that we added pictures

<div id="box">
        <div class="box1">
            <img src="./img/heisha.jpg" alt="">
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.webp.jpg" alt="">
            <img src="./img/mig2.webp.jpg" alt="">
            <img src="./img/img5.jpg" alt="">
        </div>
    </div>

The next step is the most critical operation of the animation,
set up sub-containers (loading picture) automatic lateral movement, to achieve a carousel effect.
css animation process into motion is 100, more than a dozen that we separate the frame, so that sub-containers moving place, to achieve a carousel view of an automatic suspensive effect , look at the code ↓↓↓

#box{border: 10px black solid;width: 1200px;height: 600px;overflow: hidden;margin: 100px auto;}
#box .box1{width: 6000px;height: 600px;display: flex;animation: mov 28s infinite;}
#box .box1 img{width: 1200px;height: 600px;}
@keyframes mov{
        0%{transform: translate(-4800px,0);}
        11%{transform: translate(-4800px,0);}
        22%{transform: translate(-3600px,0);}
        33%{transform: translate(-3600px,0);}
        44%{transform: translate(-2400px,0);}
        55%{transform: translate(-2400px,0);}
        66%{transform: translate(-1200px,0);}
        77%{transform: translate(-1200px,0);}
        88%{transform: translate(0px,0);}
        100%{transform: translate(0px,0);}

Effect of the video (video into a GIF image quality touching, forgive me) ↓↓↓

There are several points we need to pay attention:
container and image size 1. Set to match the convenience of our next set.
2. Each move must be a distance of the width of the picture, a time to pause on such visual displays a map, meet the design requirements.
3. The pause time, and is proportional to the number of frames allocated as needed calculation settings

Today's good to share these, or have any questions, then please big brother to guide it in the comments below! ! ! ! ! !