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
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: 从下到上