Animate.css 强大的跨浏览器CSS3动画库

当前位置:主页 > CSS3库 > CSS3动画 > Animate.css 强大的跨浏览器CSS3动画库
Animate.css 强大的跨浏览器CSS3动画库
分享:

    插件介绍

    animate.css是一款功能非常强大的跨浏览器CSS3动画库。animate.css支持多达66种不同的CSS3动画效果,如:翻转、旋转、淡入淡出、滑动、放大缩小等等。最重要的是它几乎兼容所有的浏览器。

    浏览器兼容性

    浏览器兼容性
    时间:01-06
    阅读:
简要教程

animate.css是 Daniel Eden 写的一款浏览器、功能强大、简单易用的CSS3动画库插件。animate.css支持多达66种CSS3动画效果,并且十分易于使用,几行代码即可完成一个动画效果。

使用方法

要使用animate.css,首先要将animate.css文件在你的html文件头部中引入。然后在你想要执行动画的元素上添加class,class的内容是你需要的动画效果的名称,动画即可完成!就这么简单。

在头部引入animate.css文件:

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

你还可以使用animate.css和jQuery结合来做其它很多事情。使用jQuery来动态调用animate.css是一件非常简单的事情:

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

你可以通过下面的语句来检测动画什么时候结束:

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

你可以自定义动画时间,还可以为动画添加一个延时。

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

自定义重构

animate.css是通过 Grunt 构建的。你可以非常容易的自定义重构它。首先,你需要Grunt和其它所有的依赖:

$ cd path/to/animate.css/
$ sudo npm install
                

接下来运行grunt watch来观察和编译你的自定义重构文件。如果你只需要一部分的动画效果,可以编辑animate-config.json文件来选择你需要的动画效果。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}
                

更多关于animate.css的资料请参考:https://github.com/daneden/animate.css