Animation.css学习笔记

最新推荐文章于 2023-11-18 08:13:50 发布
最新推荐文章于 2023-11-18 08:13:50 发布
阅读量414 收藏 2
点赞数
原文链接：https://juejin.im/post/5c0b98ea6fb9a049c43d7c93
版权

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



weixin_34228617
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animation.css
01-10
最全的各种动画效果的代码，开发的基础库，帮组新手开发者快速上手动画开发。
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
学习css动画-animation
失眠时间的博客
11-18 270
CSS Animation 才算是真正意义上的 CSS3 动画，它具备了对 关键帧和循环次数 的自定义能力。与 CSS Transition 相比较，有如下 CSS 过渡 所不具备的特性：CSS Animation 在实现像 CSS Transition 补间动画 效果时，还可以在起始帧和结束帧之间自定义中间帧，使得动画更加平滑过渡的同时，对动画有了更好的控制和自定义能力。
第三方动画库animation.css
Liberty_yes的博客
01-29 2万+
vue动画，css动画，使用第三方动画库animation.css轻松实现多种动画炫酷的效果！
超详细 CSS动画-animation
欢迎访问我的主页：https://www.bookbook.cc
03-17 3万+
css3 animation @keyframes
css的animation动画
yuan0209的博客
11-25 7849
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
CSS中animation动画-详解
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
如何使用animate.css动画库
qczzc的博客
05-21 4525
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
animation.css实现动画旋转特效特效代码
03-20
animation.css实现动画旋转特效是一款基于CSS3实现的酷炫的动画旋转特效代码
animation.css实现动画旋转特效.zip
11-16
animation.css实现动画旋转特效.zip
animation.js
05-16
这个是轮播必要使用的动画函数，将动画函数封装有助于节省代码，而且可以快速的开发项目，完成项目的动画需求
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
12-28
以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果，则如下所示 <button v-on:click=show = !show>Toggle</button> 蓝色理想 ...如果要为此加入过渡效果，则需要使用过渡组件transition  ...
CSS动画-Animation
温情
10-16 5305
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
css动画-animation各个属性详解
weixin_45810135的博客
10-04 1万+
css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括： ①animation-name， ②animation-duration， ③animation-timing-function， ④animation-delay， ⑤animation-iteration-count， ⑥animation-direction， ⑦animation-fill-mode， ⑧
CSS动画（animation）详解
我只是个很菜的前端
10-25 3万+
CSS动画（animation）详解
Animate.css介绍及使用教程
Andrelia的博客
07-13 1万+
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 https://raw.github.com/daneden/animate.css/mas...
CSS animation动画使用详解
Gik99的博客
07-12 3440
css之animation动画详解
CSS3之动画
zh_hunan的博客
10-28 851
动画(animation) 什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200...
华为OD机试D卷 - 用连续自然数之和来表达整数 - 免费看解析和代码.html
最新发布
05-10
私信博主免费获取真题解析以及代码

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值