如何使 CSS 动画更加顺滑自然

html-css021

如何使 CSS 动画更加顺滑自然,第1张

<div id="a1"></div><div id="a2"></div><div id="a3"></div>//引入jQuery.js<script>var t1=$("#a1").offset().topvar t1=$("#a2").offset().topvar t1=$("#a3").offset().top

$(window).scroll(function(){var top=$(window).scrollTop()if(top>t1&&top<t2){

$("#a1").addClass("an1")

}if(top>t2&&top<t3){

$("#a2").addClass("an1")

}if(top>t3){

$("#a3").addClass("an1")

}

})</script>

大概的过程是这样的:

...

a(this).addClass("animated").find(".aninode").each(function() {

a(this).addClass(a(this).attr("data-animate"))

})

...

页面滚动到每个 section 元素的时候,先给它加个名为 animated 的 class ,在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值,也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说,通过 class="animated" 当做钩子,有 animated 这个 class 的时候,名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。

动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。

其实这个页面可以再完善下 section 元素 move 出屏幕的时候,去掉 animated;当move 回来的时候再加上 animated。目前的情况是,滚动到页面最低下以后,再往上滚动页面,就看不见动画效果了