好用好看的动画库

官网

animate.css

 

动画效果如下

①Attention seekers

  • bounce    轻轻跳跃一下(弹跳;弹起,反跳;弹回)
  • flash     闪烁两次(使闪光;反射)
  • pulse     慢慢放大,然后回缩(跳动,脉跳)
  • shake     左右轻晃几次
  • swing     以中间顶部为中心小幅度晃动
  • tada      很调皮的一个小晃动,ps:只能这么描述了
  • wobble    大幅晃动,地动山摇

②Bouncing Entrances

  • bounceIn 正中央,从无到有,轻轻抖动几次
  • bounceInDown    从右侧进来,无到有,轻轻抖动几次
  • bounceInLeft 雷同,但是一定要注意大小写“专业点叫驼峰式”
  • bounceInRighr
  • bounceInUp
  • bouncing Exits
  • bounceOut 正中央,从有到无,轻轻抖动几次消失
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRighr
  • bounceOutUp

③Fading Entrances

  • fadeIn     跟上面bounceIn还是有些区别的,毕竟不抖
  • fadeInDown 逐渐从上面down下来
  • fadeInDownBig逐渐从上面down下来,但是跟上面那位有稍微区别,加了big后起始位置是从设备外进来的
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightNig
  • fadeInUp
  • fadeInUpBig 用up测试下big吧
  • fading Exits
  • fadeOut     恰与fadeIn相反
  • fadeOutDown 逐渐从上面down下去消失,你确定不玩玩big了?
  • fadeOutDownBig逐渐从上面down下去,但是跟上面那位有稍微区别,加了big后终点位置是从设备外
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightNig
  • fadeOutUp
  • fadeOutUpBig

/*以下这些都是常用的哦!*/

④Flippers

  • flip 一个夸张的放大饭庄缩小效果
  • flipInX 沿中心水平轴小幅度反转出来
  • FlipInY 沿中心竖直轴小幅度反转出来
  • flipOutX 沿中心水平轴小幅度反转消失
  • FlipOutY 沿中心竖直轴小幅度反转消失

⑤Lightspeed

  • lightSpeedIn 字面意思就是光速出来喽,记得调快速度哦,什么,怎么调速我没说么?好吧,先留个坑,待会儿补。
  • lightSpeedOut 光速消失

⑥Rotating Entrances

  • rotateIn 准确说是以正中心点180度旋转渐显
  • rotateInDownLeft  没错,就是以左上角为中心点转下来
  • rotateInDownRight 就是以右上角为中心点转下来
  • rotateInUpLeft     就是以左上角为中心点转上去
  • rotateInUpRight    就是以右上角为中心点转上去
  • rotating Exits
  • rotateOut 准确说是以正中心点180度旋转渐隐
  • rotateOut DownLeft
  • rotateOut DownRight
  • rotateOut UpLeft
  • rotateOut UpRight

⑦Sliding Entrances

  • slideInUp 这个slide感觉就有点鸡肋了,有了上边的Lightspeed、fadeIn,就会看出这个的弊端,动作幅度太小
  • slideInDown
  • slideInLeft
  • slideInRight
  • sliding Exits
  • slideOutUp 表现依旧不好
  • slideOutDown
  • slideOutLeft
  • slideOutRight

⑧Zoom Entrances

  • zoomIn 牢记哦,正中央出来的,做效果是最棒了
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoom Exits
  • zoomOut 牢记哦,正中央消失的,配合上面的zoomIn做效果是最棒了
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

⑨Specials

  • hinge 悬挂,颤抖,掉下去
  • rollIn 从左侧旋转进入
  • rollOut 向右侧旋转消失