Skip to content
一个跨浏览器的 CSS3 动画库。
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
test
.gitignore
README.md
animate.styl
gulpfile.js
package.json

README.md

CSS3 Animate

animate.css 转换成 animate.styl 这个是来自Github,官网 animate.css

压缩代码

$ npm install # 安装依赖
$ gulp stylus # 生成css 和 min.css
$ gulp watch # 监听进行编辑styl源文件

js 添加一个动画效果

依赖jQuery方法

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

检测动画结束

多数情况使用one

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

更改动画持续时间

  • vendor 填写兼容前缀如-moz--webkit-o-ms
.bounceIn {
  //定义动画完成一个周期所需要的时间
  -vendor-animation-duration: 3s;
  //属性定义动画何时开始。允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画
  -vendor-animation-delay: 2s;
  //播放动画次数 infinite(无限循环)
  -vendor-animation-iteration-count: infinite; 
}
You can’t perform that action at this time.