css动漫效果库,Animate.css功能强⼤的纯CSS3动画库-资源分
享
Animate.css是⼀个CSS3动画库，他为我们预设了很多可以使⽤的动画效果，⽐如弹跳、飘过、滑动、渐变的等特效，简单好⽤，只需要添加对应的动画Class到元素上，即可调⽤插件的动画效果，⽽且⽀持跨浏览器使⽤。
使⽤⽅法
1、先下载插件，你可以在Github上到，然后引⼊到我们的项⽬中：
2、将类动画添加到您想要动画的元素中。您还可能希望将类infinite包含到⽆限循环中。可⽀持的动画类列表
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig
fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig
flipInX
flipInYanimate下载安装
flipOutX
flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft
rotateOutUpRight
hinge
jackInTheBox
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
这⾥包括两个class名，第⼀个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第⼆个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
4、当动画效果执⾏完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd MSAnimationEnd', doSomething);
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，⽐如：
$(function(){
$('#demo').addClass('animated bounce');
});
有些动画效果最后会让元素不可见，⽐如淡出、向左滑动等等，可能你⼜需要将 class 删除，⽐如：
$(function(){
$('#demo').addClass('animated bounce');
setTimeout(function(){
$('#demo').removeClass('bounce');
}, 1000);
});
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，⽐如：#demo{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执⾏次数
}
相关链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。