css3 achieve Carousel 2

Achieve results:

Image Carousel, to achieve the overall picture transition effects

Fundamental:

总共用10秒，0%到30% 3.333秒内显示第一张图片。30%到33%图片从0到-291px切换，花费0.333秒。以此类推。

Picture 3 after 1 increase picture purpose is to make animated natural convergence. 100% is 0%.

div is display area, ul mobile area of the picture.

Code: Please add their own pictures. Example is the picture size 291px * 571px

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            div{
                margin-left:0;
                width:291px;
                height:517px;
                overflow:hidden;
            }
            div>ul {
                width: 1164px;
                height: 517px;
                list-style: none;
                -webkit-animation: mymove 10s linear infinite;
            }
            
            div>ul>li {
                margin-top: 0;
                float: left;
            }
            
            div>ul:hover {
                animation-play-state: paused;
            }
            
            @-webkit-keyframes mymove {
                0% {
                    margin-left: 0;
                }
                30% {
                    margin-left: 0;
                }
                33% {
                    margin-left: -291px;
                }
                63% {
                    margin-left: -291px;
                }
                66% {
                    margin-left: -582px;
                }
                97% {
                    margin-left: -582px;
                }
                100% {
                    margin-left: -873px;
                }
            }
        </style>
    </head>

    <body>
        <div>
            <ul>
                <li><img src="img/01.png"></li>
                <li><img src="img/02.png"></li>
                <li><img src="img/03.png"></li>
                <li><img src="img/01.png"></li>
            </ul>
        </div>
    </body>

</html>

Question: If the picture is not a fixed number of sheets, the code how to adjust?

css3 achieve Carousel 2

Guess you like