Animation.css学习笔记

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

内容简介：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>复制代码

未完待续....


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

查看所有标签

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

码农书籍
软件开发者路线图

软件开发者路线图

Dave H. Hoover、Adewale Oshineye / 王江平 / 机械工业出版社 / 2010年9月 / 35.00元

作为一名软件开发者，你在奋力推进自己的职业生涯吗？面对今天日新月异和不断拓展的技术，取得成功需要的不仅仅是技术专长。为了增强专业性，你还需要一些软技能以及高效的学习技能。本书的全部内容都是关于如何修炼这些技能的。两位作者Dave Hoover和Adewale Oshineye给出了数十种行为模式，来帮你提高主要的技能。 本书中的模式凝结了多年的调查研究、无数次的访谈以及来自O’Reilly在......一起来看看 《软件开发者路线图》 这本书的介绍吧!

码农工具
在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

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

HEX HSV 互换工具

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