温馨提示：本文最后更新于
2025-06-12 17:11:36，某些文章具有时效性，若有错误或已失效，请在下方留言！Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。
用法
1、首先引入animate css文件
<head>
<link
rel="stylesheet"
href="https://cdnjs.admincdn.com/animate.css/4.1.1/animate.min.css"/>
</head>2、给指定的元素加上指定的动画样式名
<h1 class="animate__animated animate__bounce">An animated element</h1>这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');4、当动画效果执行完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){
$('#jq22').addClass('animated bounce');
});有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){
$('#jq22').addClass('animated bounce');
setTimeout(function(){
$('#jq22').removeClass('bounce');
}, 1000);
});animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
<h1>jq22{</h1>animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数</pre>
}animate提供了哪些动画
- fade 淡入淡出
| 属性 | 效果 |
|---|---|
| fadeIn | 淡入 |
| fadeInDown | 向下淡入 |
| fadeInDownBig | 向下快速淡入 |
| fadeInLeft | 向右淡入 |
| fadeInLeftBig | 向右快速淡入 |
| fadeInRight | 向左淡入 |
| fadeInRightBig | 向左快速淡入 |
| fadeInUp | 向上淡入 |
| fadeInUpBig | 向上快速淡入 |
| fadeOut | 淡出 |
| fadeOutDown | 向下淡出 |
| fadeOutDownBig | 向下快速淡出 |
| fadeOutLeft | 向左淡出 |
| fadeOutLeftBig | 向左快速淡出 |
| adeOutRight | 向右淡出 |
| fadeOutRightBig | 向右快速淡出 |
| fadeOutUp | 向上淡出 |
| fadeOutUpBig | 向上快速淡出 |
- bounce 弹跳类
| 属性 | 效果 |
|---|---|
| bounceIn | 弹跳进入 |
| bounceInDown | 向下弹跳进入 |
| bounceInLeft | 向右弹跳进入 |
| bounceInRight | 向左弹跳进入 |
| bounceInUp | 向上弹跳进入 |
| bounceOut | 弹跳退出 |
| bounceOutDown | 向下弹跳退出 |
| bounceOutLeft | 向左弹跳退出 |
| bounceOutRight | 向右弹跳退出 |
| bounceOutUp | 向上弹跳退出 |
- zoom 缩放类
| 属性 | 效果 |
|---|---|
| zoomIn | 放大进入 |
| zoomInDown | 向下放大进入 |
| zoomInLeft | 向右放大进入 |
| zoomInRight | 向左放大进入 |
| zoomInUp | 向上放大进入 |
| zoomOut | 缩小退出 |
| zoomOutDown | 向下缩小退出 |
| zoomOutLeft | 向左缩小退出 |
| zoomOutRight | 向右缩小退出 |
| zoomOutUp | 向上缩小退出 |
- rotate 旋转类
| 属性 | 效果 |
|---|---|
| rotateIn | 顺时针旋转进入 |
| rotateInDownLeft | 从左往下旋入 |
| rotateInDownRight | 从右往下旋入 |
| rotateInUpLeft | 从左往上旋入 |
| rotateInUpRight | 从右往上旋入 |
| rotateOut | 顺时针旋转退出 |
| rotateOutDownLeft | 向左下旋出 |
| rotateOutDownRight | 向右下旋出 |
| rotateOutUpLeft | 向左上旋出 |
| rotateOutUpRight | 向右上旋出 |
- flip 翻转类
| 属性 | 效果 |
|---|---|
| flipInX | 水平翻转进入 |
| flipInY | 垂直翻转进入 |
| flipOutX | 水平翻转退出 |
| flipOutY | 垂直翻转退出 |
- strong 强调类
| 属性 | 效果 |
|---|---|
| bounce | 弹跳 |
| flash | 闪烁 |
| pulse | 脉冲 |
| rubberBand | 橡皮筋 |
| shake | 左右弱晃动 |
| swing | 上下摆动 |
| tada | 缩放摆动 |
| wobble | 左右强晃动 |
| jello | 拉伸抖动 |
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
© 版权声明
THE END
暂无评论内容