【Web前端】Animate.css 一款强大的预设css3动画库

温馨提示:本文最后更新于2025-06-19 08:53:57,某些文章具有时效性,若有错误或已失效,请在下方留言!
AI智能摘要
Animate.css 是一个跨浏览器的 CSS3 动画库,提供大量预设动画效果,适用于网页元素的动态展示。使用方法为引入 CSS 文件并在 HTML 元素中添加相应的动画类名。支持通过 jQuery 动态添加动画类,并可在动画结束后触发事件。其动画效果包括淡入淡出、弹跳、缩放、旋转、翻转和强调类,如 fadeIn、bounceIn、zoomIn、rotateIn、flipInX 和 pulse 等。用户也可自定义动画持续时间、延迟和重复次数。
— 此摘要由AI分析文章内容生成,仅供参考。

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
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容