如何僅在元素滾動到視圖中時觸發 CSS3 動畫？

當內容捲動到視圖時啟動 CSS3 動畫

當元素的位置超出視窗時，它會從視圖中隱藏。為了優化效能，只有當元素出現在視窗中時才能啟動 CSS3 動畫。這對於放置在頁面下方且上方有大量內容的元素特別有用。

為了實現這一點，我們利用 JavaScript 或 jQuery 來捕捉滾動事件。一旦觸發捲動事件，程式碼就會檢查目標元素是否已捲動到視窗中。如果是這樣，則向元素添加一個指示類，提示動畫開始。

程式碼實作：

HTML：

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS：

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

CSS：

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Element position
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return (elemTop < viewportBottom) && (elemBottom > viewportTop);
}

function checkAnimation() {
    var $elem = $('.bar .level');

    if ($elem.hasClass('start')) return;
    
    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

CSS：CSS：CSS：CSS：CSS：CSS：jQuery：

以上是如何僅在元素滾動到視圖中時觸發 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！