
它是怎么工作的
该CSS3动画参照表是一组为你的web项目预设的插件和动画播放效果。你只需要将样式添加到您的网站和并应用一些预定义的CSS类,来实现你想要的动画效果。
该CSS3动画参照表使用CSS3@keyframes并适用于所有现代浏览器(IE10)。使用CSS3@keyframes,你不必调整元素的定位以适应动画 - 它将自动到位。还为用户提供旧版浏览器向后支持,如果动画不被触发,该元素也将是可见的,并保持不变。下面是关于如何应用的说明。
添加下面的动画样式文件引用到你网页的<head>元素中:
<link rel="stylesheet" href="css/animations.css">
在你想要添加动画的元素上添加对应的动画样式类名, “slideUp” (向上滑入)
<div id="object" class="slideUp">
你可以将slideUp换成你想要的任何动画类。
对于渐入的动画,最好先在动画元素上添加不可见的样式: visibility: hidden (注* 不可见,但占用空间仍在,这样不会影响页面布局)
#object{background-color: #fe5652;visibility: hidden;}
添加效果
默认情况下,这些动画会在页面加载时触发 - 即使元素页面的很下方 - 但是你可以使用jQuery来激活动画。
下面是一段使用jQuery来触发动画的例子: (注* 当动画元素在窗口的可见区域时,添加动画效果)
<script>$(window).scroll(function() {$('#animatedElement').each(function() {var imagePos = $(this).offset().top;var topOfWindow = $(window).scrollTop();if (imagePos < topOfWindow + 400) {$(this).addClass("slideUp");}});});</script>
400 代表动画元素距离窗口顶部的距离,当小于400象素即可触发动画效果, 下面在用户点击时添加动画:
<script>
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});
</script>
附: 动画样式列表
进入动画列表
slideUp
slideDown
slideLeft
slideRight
slideExpandUp
expandUp
fadeIn
expandOpen
bigEntrance
hatch
混合动画列表
bounce
pulse
floating
tossing
pullUp
pullDown
stretchLeft
stretchRight
回复 (0)
微信扫码 立即评论
