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

未完待续....


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

查看所有标签

猜你喜欢:

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

码农书籍
人件（原书第3版）

人件（原书第3版）

[美] Tom DeMarco、[美] Timothy Lister / 肖然、张逸、滕云 / 机械工业出版社 / 2014-8 / 69.00元

在软件管理领域，很少有著作能够与本书媲美。作为经久不衰的畅销书，本书深刻地洞察到软件开发的最大问题不在于技术，而在于人。人的因素并不容易解决，一旦解决了，你将更有可能获得成功。 本书是软件管理领域的传奇经典，被誉为“对美国软件业影响最大的一本书”。全书从管理人力资源、创建健康的办公环境、雇用并留用正确的人、高效团队形成、改造企业文化和快乐工作等多个角度阐释了如何思考和管理软件开发的最大问题—......一起来看看 《人件（原书第3版）》 这本书的介绍吧!

码农工具
Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

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