CSS3动画库animate.css 50多种动画形式


今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用。用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了。

用法

在您的网站上使用animate.css,只要简单地把样式表插入到文档中的中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称。就是这样!你就有了一个CSS动画效果。超强!

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

注* 示例

<h1 class="animated bounceOut">Animate.css</h1>

当与jQuery结合起来,你可以自己决定何时启用这些动画,通过jQuery动态添加使用动画,你可以做的事情更多:

$('#yourElement').addClass('animated bounceOutLeft');

你还可以检测动画结束事件:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

注:jQuery.one() 最多执行事件处理一次。点击此处了解详情。
您可以更改动画的持续时间,增加延迟或改变显示次数:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意:一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”

官网地址:http://daneden.github.io/animate.css/
直链下载:直链下载

声明:Shire | 一路走一路记|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - CSS3动画库animate.css 50多种动画形式


Carpe Diem and Do what I like