animate.css类的释义及使用

转载 小火柴的蓝色理想 - 博客园  2021-11-27 21:01  阅读 41 次
阿里云免费代金券,购买阿里云产品前先领券更优惠!

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。

获取地址:

animate.css的最新版本是v4.1.1,引入animate.css很容易,有以下几种方法

1、从GitHub下载

https://github.com/animate-css/animate.css

2、用npm安装:

$ npm install animate.css --save

3、用Yarn安装:

$ yarn add animate.css

4、使用在线CDN

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

释义及演示

animate.css的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就可以。

animate.css里面的类,主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。

【Attention(晃动效果)】

bounce #弹跳
flash #闪动 
pulse #脉冲 
rubberBand #类橡皮筋拉伸抖动
shake  #迅速抖动 
headShake#抖动
swing #摇动 
tada #摆动 
wobble #摇晃
jello #两边上下摆动

以在div上使用bounce为例

<div class="animated bounce"></div>


【bounce(弹性缓冲效果)】

bounceIn #弹跳进入 
bounceInDown #从上方弹入
bounceInLeft #从左方弹入
bounceInRight #从右方弹入
bounceInUp #从下方弹入
bounceOut #弹出
bounceOutDown #从上方弹出 
bounceOutLeft #从左方弹出 
bounceOutRight #从右方弹出 
bounceOutUp #从下方弹出


【fade(透明度变化效果)】

fadeIn #淡入
fadeInDown #从上方淡入
fadeInDownBig #从整个屏幕上方淡入
fadeInLeft #从左方淡入 
fadeInLeftBig #从整个屏幕左方淡入
fadeInRight #从右方淡入 
fadeInRightBig #从整个屏幕右方淡入
fadeInUp #从下方淡入 
fadeInUpBig #从整个屏幕下方淡入
fadeOut #淡出 
fadeOutDown #从上方淡出
fadeOutDownBig #从整个屏幕的上方淡出
fadeOutLeft #从左方淡出
fadeOutLeftBig #从整个屏幕的左方淡出
fadeOutRight #从右方淡出
fadeOutRightBig #从整个屏幕的右方淡出 
fadeOutUp  #从下方淡出
fadeOutUpBig #从整个屏幕的下方淡出


【flip(翻转效果)】

flip #翻转
flipInX #沿X轴翻入
flipInY #沿Y轴翻入
flipOutX #沿X轴翻出 
flipOutY #沿Y轴翻出


【rotate(旋转效果)】

rotateIn #旋转 
rotateInDownLeft #从左上边转入
rotateInDownRight #从右上边转入
rotateInUpLeft #从左下转入
rotateInUpRight #从右上转入
rotateOut #转出
rotateOutDownLeft #从左上边转出
rotateOutDownRight #从右上边转出 
rotateOutUpLeft #从左下边转出 
rotateOutUpRight #从右下边转出


【slide(滑动效果)】

slideInDown #从上方划入
slideInLeft #从左方划入 
slideInRight #从右方划入
slideInUp #从下方划入
slideOutDown #从上方划出 
slideOutLeft #从左方划出 
slideOutRight #从右方划出
slideOutUp #从下方划出 


【zoom(变焦效果)】

zoomIn #放大
zoomInDown #从上方进入放大
zoomInLeft #从左方进入放大
zoomInRight #从右方进入放大
zoomInUp #从下方进入放大
zoomOut #缩小
zoomOutDown #从上方进入缩小
zoomOutLeft #从左方进入缩小
zoomOutRight #从右方进入缩小
zoomOutUp #从下方进入缩小


【special(特殊效果)】

hinge #掉落
rollIn #滚入 
rollOut #滚出 
lightSpeedIn #光速进入 
lightSpeedOut #光速出去


示例说明:

在使用中,可直接在元素上添加animated和对应的类名即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css\animate.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>

通过给JS添加或删除class,可以实现动态效果

<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css\animate.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<button id="btn1">添加</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
oBox.classList.add('animated');
oBox.classList.add('flash');
}
oBtn2.onclick = function(){
oBox.classList.remove('flash');
}
</script>
</body>
</html>

动画的配置参数,比如动画持续时间,动画的执行次数等等,可以在元素上自行定义,覆盖掉animate.css里面的默认定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css\animate.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
.infinite{animation-iteration-count:infinite;}
</style>
</head>
<body>
<button id="btn1">添加循环的动画效果</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
  oBox.classList.add('infinite');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>
</body>
</html>

好记性,不如烂笔头,虽然不用笔,一直记录,总有用的时候,感谢小火柴的蓝色理想-博客园的分享。

本文地址:https://8ik.cn/archives/257
关注我们:请关注一下我们的微信公众号:扫描二维码捌栢科的公众号,公众号:Hey_MrBoss
温馨提示:文章内容系作者个人观点,不代表捌栢科对观点赞同或支持。
版权声明:本文为转载文章,来源于  小火柴的蓝色理想 - 博客园 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情