純css實現單張圖片無限循環無縫滾動

參考鏈接：https://blog.csdn.net/qq_20777797/article/details/77916029

https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html

需求是一共有兩個，
1、單張豎圖持續向上無縫滾動，

2、單張豎圖滾動到正中間之后，停留3s，繼續滾動。

一、用js setInterval定時器實現

js實現要通過不斷的改變定位、復制圖片的方式來做，效果極其不穩定

二、用css3 animation動畫實現

需求1動畫：

 @-webkit-keyframes scrollUp {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @-moz-keyframes scrollUp {
            0% {
                -moz-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -moz-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @-o-keyframes scrollUp {
            0% {
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -o-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

        @keyframes scrollUp {
            0% {
                -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-400px);
                -moz-transform: translateY(-400px);
                -o-transform: translateY(-400px);
                transform: translateY(-400px);
            }
        }

需求2動畫：

@-webkit-keyframes scrollUpAndPause {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -webkit-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @-moz-keyframes scrollUpAndPause {
            0% {
                -moz-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -moz-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -moz-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @-o-keyframes scrollUpAndPause {
            0% {
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

        @keyframes scrollUpAndPause {
            0% {
                -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(-350px);
                -moz-transform: translateY(-350px);
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
            100% {
                -webkit-transform: translateY(-350px);
                -moz-transform: translateY(-350px);
                -o-transform: translateY(-350px);
                transform: translateY(-350px);
            }
        }

html

<div class="box">
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
</div>

style:

 .box {
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

應用動畫：

.image-item {
            width: 500px;
            height: 400px;
            background: url("./貓咪咪.jpg") repeat-y center center; /* 什么圖片都可以*/
            /*animation-delay: 2s;!*延遲2s在進行滾動*!*/
            -webkit-animation: 3s scrollUp linear infinite normal;/* 3s持續滾動圖片*/
            animation: 3s scrollUp linear infinite normal;
            /*-webkit-animation: 4s scrollUpAndPause linear infinite normal;*/ /* 每停3s滾動一次*/
            /*animation: 4s scrollUpAndPause linear infinite normal;*/
 }

另外自己做好css的兼容寫法即可實現。

注意：

1、前提是把一張圖片復制成3張，以實現無縫滾動，網上看了很多人此類無縫循環滾動的方法，實現出來之后，每次回到起點都會有跳動的感覺，這里經過摸索，給動畫上移的距離設為圖片的高度，就不會有跳動問題了，完美無限循環+無縫滾動；

2、圖片每停3s滾動一次，且每次剛好停在正中間，上線留的銜接的圖片距離相等，這里就要計算一下，每次動畫上移距離= 圖片實際顯示高度-（所在區域的總高度-上間距高度）。

以下是圖片滾動的js，如果要實現動態獲取圖片高度，則需要寫下面的js：

function addKeyFrames(height,offsetHeight){
    let style = document.createElement('style');
    style.type = 'text/css';
    let keyFrames = '\
    @-webkit-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-moz-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-o-keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @keyframes scrollUpAndPause {\
        0% {\
            -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        40% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(A_DYNAMIC_VALUE);\
        }\
    }\
    @-webkit-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @-moz-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @-o-keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }\
    @keyframes scrollUp {\
        0% {\
             -webkit-transform: translateY(0);\
            transform: translateY(0);\
        }\
        100% {\
            -webkit-transform: translateY(0);\
            transform: translateY(B_DYNAMIC_VALUE);\
        }\
    }';
    keyFrames = keyFrames.replace(/A_DYNAMIC_VALUE/g, '-'+(height-(offsetHeight-height)/2)+'px');
    keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, '-'+height+'px');
    style.innerHTML = keyFrames;
    document.getElementsByTagName('head')[0].appendChild(style);
}
// 初始化圖片滾動動畫高度
function initAnimate() {
    const adLeftHeight = document.getElementById("adLeft").offsetHeight; // 左側區域高度
    const adLeftWidth = document.getElementById("adLeft").offsetWidth; // 左側區域寬度
    let leftImage = new Image();
    let leftImageWidth = "";
    let leftImageHeight = "";
    leftImage.src = window.campaign.image_url;
    leftImage.onload = function () {
        leftImageWidth = leftImage.width;
        leftImageHeight = leftImage.height;
        let imageRealHeight = adLeftWidth * (leftImageHeight / leftImageWidth);
        // const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三張圖片的總高度
        // const imageHeight = imageBoxScrollHeight/3;// 單張圖片高度
        addKeyFrames(imageRealHeight,adLeftHeight);
    }
}

以上js對應的html:

<div class="ad_left" id="adLeft">
        <div class="image-box" id="imageBox">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
        </div>
</div>

以上html對應的css:

.ad_left{
        width:44vw;
        height: 100vh;
        overflow: hidden;
        .image-box{
          width:100%;
          height: auto;
          .image-item {
            width: 100%;
            height: auto;
            display: block;
            animation: 5s scrollUpAndPause linear infinite normal;
          }
        }
      }