Animation.css动画效果属性
Animation.css动画效果属性
- 安装
- 使用
- 写法规则
- animation.css支持的动画种类
- 支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）
- 使用示例
- attention seekers
- bouncing entrances 登场
- bouncing exits 退场
- fading entrances 减弱进入
- fading exits 减弱退出
- flipper突然的效果
- light speed 非常快速的效果
- rotating entrances 旋转进入
- sliding entrances 滑动进入
- sliding exits 滑动退出
- zoom entrances z轴方向进入
- zoom exits z轴方向退出
- special 特别的
安装
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支持的动画种类
支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）
如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。
使用示例
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>
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>
Animation.css动画效果属性相关推荐
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS动画效果构成分析
CSS动画特效的基本构成 文章目录 CSS动画特效的基本构成 CSS动画效果 一.动画轨迹,运动路径 1.规定目标样式 属性transfrom: 二.控制运动路径 transition animati ...
- CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载 本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
- html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究 损失最大 css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
- css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
- css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸 如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
- 【每日一练】134—一个好玩有趣的CSS 动画效果
今天这个练习是一个用纯CSS实现的动画效果,非常有趣,大家可以看一下它的最终效果: HTML代码: <!doctype html> <html><head>< ...
最新文章
- Android M 权限
- springboot启动报错：Unregistering JMX-exposed beans on shutdown
- 金士顿u盘真假软件_简洁轻巧 金士顿DT80 Type-C高速闪存盘评测
- 女孩常用双关语－－男生进
- 超几何分布_概率小题——分布列专题
- 第四篇：稳定性之提升团队潜意识【及时止损、监控报警】
- （4）ZYNQ AXI4总线协议介绍
- java 证书缺乏扩展项_java解析证书的例子(包括基本项目、扩展项目)
- 李宏毅机器学习HW2-winner or loser-利用逻辑回归进行收入分类
- LeetCode_Maximum Subarray | Maximum Product Subarray
- 计算机机房的消防验收,机房建设（消防）解决方案
- python控制屏幕亮度,如何使用cron python定期调整屏幕亮度？
- 计算机图形学 读书笔记（七）B样条曲线 B-Spline
- Mysql客户端navicat的使用并连接远程数据库【重点】
- steam审查元素免费得到几十款游戏教程
- 347.前K个高频元素 C++
- ps将logo变透明
- 爬取全民K歌用户歌曲
- 有一种图片形式是“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQ…==”...
- 推特：现在不能完成你的注册 关闭