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

捲動時觸發 CSS3動畫

問題：

在內容滾動到視圖之前加載動畫條形圖，導致錯過了

解決方案：

捲動到視圖時啟動CSS3動畫：

1.捕獲滾動事件

實作監視滾動事件的 JavaScript 或 jQuery 事件偵聽器。

2.檢查元素可見性

對於每個滾動事件，檢查元素（條形圖）在使用者視窗中是否可見。

3.開始動畫

元素變得可見（例如，當isElementInViewport()）返回true時），透過應用適當的CSS類別（例如，「start」）來啟動動畫.

範例程式碼：

<!-- 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;
}

<!-- jQuery -->
function isElementInViewport(elem) {
    // Calculate element and viewport positions
    // ...

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

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

    // Prevent redundant animation start
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

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

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