如何在滾動到視圖時觸發 CSS3 動畫？

內容滾動到視圖中時如何激活CSS3 動畫

問題

您正在使用CSS3 動畫來使條形圖栩栩如生，但是動畫在動畫在頁面載入時開始。由於條形圖由於前面的內容而被放置在螢幕外，因此當用戶向下滾動查看它時，動畫已完成。

解決方案：擷取捲動事件

關鍵在於擷取使用 JavaScript 或 jQuery 捲動事件。每次捲動時，程式碼都會檢查長條圖元素是否在視窗內。一旦偵測到元素的可見性，它就會透過新增啟動動畫的「start」類別來觸發動畫。

程式碼實作

HTML

CSS

jQuery

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