Animation.css学习笔记

综合技术 2018-12-09 阅读原文

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
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig 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
heartBeat
  • 支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)

    Class NameDelay Time
    delay-2s 2s
    delay-3s 3s
    delay-4s 4s
    delay-5s 5s
    Class NameSpeed Time
    slow 2s
    slower 3s
    fast 800ms
    faster 500ms

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

使用示例:

  • 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>复制代码

未完待续....

稀土掘金

责编内容by:稀土掘金阅读原文】。感谢您的支持!

您可能感兴趣的

CSS: margin of title in div HTML/CSS newbie here. I want to create a div (in blue), with an h1 at the top (in red). The h1 should have a margin of 3...
Create an accessible dropdown navigation Hover navigations are pretty simple to do without JavaScript, which is how I usually see them implemented. The HTML and...
一个前端工作流设计方案 是大概怎样的... 这是一个之前就设计好的方案,现在拿出来给大家看看,工作流的设计方案大概的流程是怎样的。 1. 背景及现状 随着前端开发复杂度的日益增加,各种优秀的组件框架也遍地开花。同时,我们面临业务规模的快速发展和工程师团队的不断扩张,如何...
Clean CSS With Stylelint Last night I was working on the album functionality for this website. CSS is not my strong suit, so I wanted to get som...
Creating a dropdown menu using CSS and HTML I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the subme...