阅读 630

Animation.css学习笔记

animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库,便于你在项目中引用。

  • 安装

    npm install animate.css --save 或者 yarn add animate.css 或者直接下载

  • 使用

    在项目中引用

    <head>
      <link rel="stylesheet" href="animate.min.css">
    </head>
    或者
    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    </head>复制代码
  • 使用规则

    class样式里面animated是一定要有的,后面时animation.css提供的动画效果种类(例如infinite),同时也支持自定义的样式(例如yourElement)。

    <h1 class="animated infinite yourElement">Example</h1>复制代码

    animation.css支持的动画种类:

Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat
  • 支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)

    Class NameDelay Time
    delay-2s2s
    delay-3s3s
    delay-4s4s
    delay-5s5s
    Class NameSpeed Time
    slow2s
    slower3s
    fast800ms
    faster500ms

如果想要设置其他的延时和加速效果,请在自己的代码中进行设置。

使用示例:

  • attention seekers

    1. bounce 弹跳:

      <h1 class="animated bounce delay-2s"> test animation css</h1>复制代码
    2. flash闪烁:

      <h1 class="animated flash delay-2s"> test animation css</h1>复制代码
    3. pulse脉搏跳动:

      <h1 class="animated pulse delay-2s"> test animation css</h1>复制代码
    4. rubberBand橡皮筋:

      <h1 class="animated rubberBand delay-2s"> test animation css</h1>复制代码
    5. shake摇动:

      <h1 class="animated shake delay-2s"> test animation css</h1>复制代码
    6. swing摇摆:

      <h1 class="animated swing delay-2s"> test animation css</h1>复制代码
    7. tada:

      <h1 class="animated tada delay-2s"> test animation css</h1>复制代码
    8. wobble晃动:

      <h1 class="animated wobble delay-2s"> test animation css</h1>复制代码
    9. jello果冻:

      <h1 class="animated jello delay-2s"> test animation css</h1>复制代码
  • bouncing entrances 登场

    1. bounceIn 弹跳进入(从左):

      <h1 class="animated bounceIn delay-2s"> test animation css</h1>复制代码
    2. bounceInDown弹跳从上进入:

      <h1 class="animated bounceInDown delay-2s"> test animation css</h1>复制代码
    3. bounceInLeft弹跳从左进入:

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>复制代码
    4. bounceInRight弹跳从右进入:

      <h1 class="animated bounceInRight delay-2s"> test animation css</h1>复制代码
    5. bounceInUp弹跳从下进入:

      <h1 class="animated bounceInUp delay-2s"> test animation css</h1>复制代码
  • bouncing exits 退场

    1. bounceOut 弹跳退出:

      <h1 class="animated bounceOut delay-2s"> test animation css</h1>复制代码
    2. bounceOutDown弹跳从下退出:

      <h1 class="animated bounceOutDown delay-2s"> test animation css</h1>复制代码
    3. bounceOutLeft弹跳从左退出:

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>复制代码
    4. bounceOutRight弹跳从右退出:

      <h1 class="animated bounceOutRight delay-2s"> test animation css</h1>复制代码
    5. bounceOutUp弹跳从上退出:

      <h1 class="animated bounceOutUp delay-2s"> test animation css</h1>复制代码
  • fading entrances 减弱进入

    1. fadeIn淡入:

      <h1 class="animated fadeIn delay-2s"> test animation css</h1>复制代码
    2. fadeInDown 从上往下淡入:

      <h1 class="animated fadeInDown delay-2s"> test animation css</h1>复制代码
    3. fadeInDownBig 从上往下变大淡入:

      <h1 class="animated fadeInDownBig delay-2s"> test animation css</h1>复制代码
    4. fadeInLegt从左往右淡入:

      <h1 class="animated fadeInLegt delay-2s"> test animation css</h1>复制代码
    5. fadeInLegtBig从左往右变大淡入:

      <h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1>复制代码
    6. fadeInRight从右往左淡入:

      <h1 class="animated fadeInRight delay-2s"> test animation css</h1>复制代码
    7. fadeInRightBig从右往左变大淡入:

      <h1 class="animated fadeInRightBig delay-2s"> test animation css</h1>复制代码
    8. fadeInUp从下往上淡入:

      <h1 class="animated fadeInUp delay-2s"> test animation css</h1>复制代码
    9. fadeInUpBig从下往上变大淡入:

      <h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>复制代码
  • fading exits 减弱退出

    1. fadeOut淡出:

      <h1 class="animated fadeOut delay-2s"> test animation css</h1>复制代码
    2. fadeOutDown 从上往下淡出:

      <h1 class="animated fadeOutDown delay-2s"> test animation css</h1>复制代码
    3. fadeOutDownBig 从上往下变大淡出:

      <h1 class="animated fadeOutDownBig delay-2s"> test animation css</h1>复制代码
    4. fadeOutLegt从右往左淡出:

      <h1 class="animated fadeOutLegt delay-2s"> test animation css</h1>复制代码
    5. fadeOutLeftBig从右往左变大淡出:

      <h1 class="animated fadeOutLeftBig delay-2s"> test animation css</h1>复制代码
    6. fadeOutRight从左往右淡出:

      <h1 class="animated fadeOutRight delay-2s"> test animation css</h1>复制代码
    7. fadeOutRightBig从左往右变大淡出:

      <h1 class="animated fadeOutRightBig delay-2s"> test animation css</h1>复制代码
    8. fadeOutUp从下往上淡出:

      <h1 class="animated fadeOutUp delay-2s"> test animation css</h1>复制代码
    9. fadeOutUpBig从下往上变大淡出:

      <h1 class="animated fadeOutUpBig delay-2s"> test animation css</h1>复制代码
  • flipper突然的效果

    1. flip反转轻弹

      <h1 class="animated flip delay-2s"> test animation css</h1>复制代码
    2. flipInX在x轴反转进入

      <h1 class="animated flipInX delay-2s"> test animation css</h1>复制代码
    3. flipInY在y轴反转进入

      <h1 class="animated flipInY delay-2s"> test animation css</h1>复制代码
    4. flipOutX在x轴反转退出

      <h1 class="animated flipOutX delay-2s"> test animation css</h1>复制代码
    5. flipOutY在y轴反转退出

      <h1 class="animated flipOutY delay-2s"> test animation css</h1>复制代码
  • light speed 非常快速的效果

    1. lightSpeedIn 非常快速的进入

      <h1 class="animated lightSpeedIn delay-2s"> test animation css</h1>复制代码
    2. lightSpeedOut 非常快速的进入

      <h1 class="animated lightSpeedOut delay-2s"> test animation css</h1>复制代码
  • rotating entrances 旋转进入

    1. rotateIn旋转进入

      <h1 class="animated rotateIn delay-2s"> test animation css</h1>复制代码
    2. rotateInDownLeft旋转从左落下

      <h1 class="animated rotateInDownLeft delay-2s"> test animation css</h1>复制代码
    3. rotateInDownRight旋转从右落下

      <h1 class="animated rotateInDownRight delay-2s"> test animation css</h1>复制代码
    4. rotateInUpLeft旋转从左升起

      <h1 class="animated rotateInUpLeft delay-2s"> test animation css</h1>复制代码
    5. rotateInUpRight旋转从右升起

      <h1 class="animated rotateInUpRight delay-2s"> test animation css</h1>复制代码
  • rotating exits 旋转退出

    1. rotateOut旋转退出

      <h1 class="animated rotateOut delay-2s"> test animation css</h1>复制代码
    2. rotateOutDownLeft旋转从左落下退出

      <h1 class="animated rotateOutDownLeft delay-2s"> test animation css</h1>复制代码
    3. rotateOutDownRight旋转从右落下退出

      <h1 class="animated rotateOutDownRight delay-2s"> test animation css</h1>复制代码
    4. rotateOutUpLeft旋转从左升起退出

      <h1 class="animated rotateOutUpLeft delay-2s"> test animation css</h1>复制代码
    5. rotateOutUpRight旋转从右升起退出

      <h1 class="animated rotateOutUpRight delay-2s"> test animation css</h1>复制代码
  • sliding entrances 滑动进入

    1. slideInUp上升滑动进入

      <h1 class="animated slideInUp delay-2s"> test animation css</h1>复制代码
    2. slideInDown下降滑动进入

      <h1 class="animated slideInDown delay-2s"> test animation css</h1>复制代码
    3. slideInRight从右滑入

      <h1 class="animated slideInRight delay-2s"> test animation css</h1>复制代码
    4. slideInLeft从左滑入

      <h1 class="animated slideInLeft delay-2s"> test animation css</h1>复制代码
  • sliding exits 滑动退出

    1. slideOutUp上升滑动退出

      <h1 class="animated slideOutUp delay-2s"> test animation css</h1>复制代码
    2. slideOutDown下降滑动退出

      <h1 class="animated slideOutDown delay-2s"> test animation css</h1>复制代码
    3. slideOutRight从右滑退出

      <h1 class="animated slideOutRight delay-2s"> test animation css</h1>复制代码
    4. slideOutLeft从左滑退出

      <h1 class="animated slideOutLeft delay-2s"> test animation css</h1>复制代码
  • zoom entrances z轴方向进入

    1. zoomIn z轴方向进入

      <h1 class="animated zoomIn delay-2s"> test animation css</h1>复制代码
    2. zoomInDown z轴方向下降进入

      <h1 class="animated zoomInDown delay-2s"> test animation css</h1>复制代码
    3. zoomInLeft z轴方向从左进入

      <h1 class="animated zoomInLeft delay-2s"> test animation css</h1>复制代码
    4. zoomInRight z轴方向从右进入

      <h1 class="animated zoomInRight delay-2s"> test animation css</h1>复制代码
  • zoom exits z轴方向退出

    1. zoomOut z轴方向退出

      <h1 class="animated zoomOut delay-2s"> test animation css</h1>复制代码
    2. zoomOutDown z轴方向下降退出

      <h1 class="animated zoomOutDown delay-2s"> test animation css</h1>复制代码
    3. zoomOutLeft z轴方向从左退出

      <h1 class="animated zoomOutLeft delay-2s"> test animation css</h1>复制代码
    4. zoomOutRight z轴方向从右退出

      <h1 class="animated zoomOutRight delay-2s"> test animation css</h1>复制代码
  • special 特别的

    1. hinge 铰链效果

      <h1 class="animated hinge delay-2s"> test animation css</h1>复制代码
    2. jackInTheBox

      <h1 class="animated jackInTheBox delay-2s"> test animation css</h1>复制代码
    3. rollIn 翻滚进入

      <h1 class="animated rollIn delay-2s"> test animation css</h1>复制代码
    4. rollOut翻滚退出

      <h1 class="animated rollOut delay-2s"> test animation css</h1>复制代码