wow.js动画类型

博主博客

wow.js

bounce 上下抖动一下

flash 闪动一下

pulse 放大一下然后缩回去

rubberBand 上下变扁 然后弹回去

shake左右晃动几下

headShake

swing  秋千左右晃动（以上边中点为圆心）

tada 晃动缩小 然后恢复

wobble 左右弧形晃动几下

jello

bounceIn  从无到有 从中部弹出来

bounceInDown 从上方下来

bounceInLeft 从左方向右来

bounceInRight 从右方向左来

bounceInUp 从下方向上来

bounceOutDown 向下方移动消失

bounceOutLeft 向左方移动消失

bounceOutRight向右方移动消失

bounceOutUp向上方移动消失

fadeIn 从无到有渐变

fadeInDown 从上方 从无到有 下来

fadeInDownBig从上方 从无到有 下来（上方距离更大）

fadeInLeft 从左方 从无到有 出来

fadeInLeftBig 从左方 从无到有 出来

（左方距离更大）

fadeInRight 从右方 从无到有 出来

fadeInRightBig 从右方 从无到有 出来

（右方距离更大）

fadeInUp 从下方 从无到有 上来

fadeInUpBig 从下方 从无到有 上来

（下方距离更大）

fadeOut 从有到无

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flip 左右立体旋转变大 

flipInX 上下立体转出来 然后弹一下

flipInY 左右立体转出来 然后弹一下

flipOutX 上下立体转出去消失

flipOutY 左右立体转出去消失

lightSpeedIn 从右方 变形（右上，左下角拉伸）向右出来

lightSpeedOut 向右方 变形（右上，左下角拉伸）向右消失

rotateIn 中心旋转出来

rotateInDownLeft 以左下角为中心旋转出来

rotateInDownRight 以右下角为中心旋转出来

rotateInUpLeft 以左上角为中心旋转出来

rotateInUpRight 以右上角为中心旋转出来

rotateOut 中心旋转消失

rotateOutDownLeft 以左下角为中心旋转消失

rotateOutDownRight 以右下角为中心旋转消失

rotateOutUpLeft 以左上角为中心旋转消失

rotateOutUpRight 以右上角为中心旋转消失

hinge 以左上角旋转 然后掉下去

jackInTheBox

rollIn 从左方旋转进来

rollOut 向右方旋转出去

zoomIn 从屏幕下来出来

zoomInDown 从屏幕下方 向下蹦出来

zoomInLeft 从屏幕下方 向右蹦出来

zoomInRight 从屏幕下方 向左蹦出来

zoomInUp 从屏幕下方 向上蹦出来

zoomOut 向屏幕下方消失

zoomOutDown 向屏幕下方 向下消失

 zoomOutLeft 向屏幕下方 向左蹦出去

zoomOutRight 向屏幕下方 向右蹦出去

zoomOutUp 向屏幕下方 向上 蹦出去

slideInDown 从上到下 滑下来

slideInLeft 从左到右 滑出来

slideInRight 从右向左 滑出来

slideInUp 从下到上 滑上去

slideOutDown 向下方滑出去消失

slideOutLeft 向左方滑出去消失

slideOutRight 向右方滑出去消失

slideOutUp 向上方滑出去消失

点击阅读原文