当内容滚动到视图中时激活 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;
}jQuery：
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();
});以上是如何仅在元素滚动到视图中时触发 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！
