Animate.css 动画及页面滚动时触发动画的wow.js

Animate.css

  • 安装 npm install animate.css --savebower install animate.css --save
  • 或通过 CDN 添加
  • 给目标对象添加一个 class 属性值animated ,也可以添加一个无限循环的class属性值infinite
  • 最后给目标元素添加要实现的动画名称添加到class属性值 参见 Animate.css
  • 也可以和jquery结合做好多事,$(#yourid).addClass('animated bounce')
  • 改变动画持续时间,延时,播放次数
#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

确保用适用的供应商前缀(webkit,moz等)替换CSS中的vendor

WOW.js

  • 导入animat.css,或者通过修改WOW.js的设置连接到其他的动画库

你可能感兴趣的:(CSS,Javascript)