Animation.css学习笔记

栏目: CSS · 发布时间: 6年前

内容简介：animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。未完待续....

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 Name Delay Time
    delay-2s 2s
    delay-3s 3s
    delay-4s 4s
    delay-5s 5s
    Class Name Speed 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>复制代码

未完待续....


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
JavaScript

JavaScript

Douglas Crockford / Yahoo Press / 2008-5 / GBP 23.99

Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative b......一起来看看 《JavaScript》 这本书的介绍吧!

码农工具
HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3