web-animation

web-animation 动画库，可以通过 bower 和 npm 下载

参考

https://github.com/daneden/animate.css https://github.com/Martz90/vivify

使用 SASS 语法编写，使用 gulp 前端打包工具进行打包

download

git clone https://github.com/vxhly/web-animation.git

npm

npm install web-animation --save

bower

bower install web-animation --save

use

<link rel="stylesheet" href="./dist/css/web-animation.min.css">

animation 属性大全

infinite: 无限播放
# 默认速度曲线 cubic-bezier(0.46, 0.03, 0.52, 0.96);
# 注意以下几个符号的代表意思：
# *-xx => 四个方位名词(top, bottom, left, right)-xx
# &:xx => 表示父级以及子集（以下用缩进两格表示父级拥有的子集）为必选项（没有写 &: 的， 父级可以独立，子集无需写即为一种动画效果）
fadeIn: 淡入（100%, 1s）
  left: 从左到右
  right: 从右到左
  top: 从上到下
  bottom: 从下到上
  *-big: 跨度大（2000px, .75s）
fadeOut: 淡出（100%, 1s）
  left: 从左到右
  right: 从右到左
  top: 从上到下
  bottom: 从下到上
  *-big: 跨度大（2000px, .75s）
hit: 偏移且倾斜（20px, 4deg）
  &:left: 从左至右偏移且倾斜
  &:right: 从右到左偏移且右倾斜
flip: 翻转（360度翻转）
flipIn: 翻转进入
  &:X：沿着X轴翻转进入
  &:Y：沿着Y轴翻转进入
flipOut: 翻转退出
  &:X：沿着X轴翻转退出
  &:Y：沿着Y轴翻转退出
zoomIn: 以缩小形式进入
  left: 从左到右
  right: 从右到左
  top: 从上到下
  bottom: 从下到上
zoomOut: 以缩小形式退出
  left: 从左到右
  right: 从右到左
  top: 从上到下
  bottom: 从下到上