animate.css 动画库的下载与使用

作者:WangMin
格言:努力做好自己喜欢的每一件事

1|0animate.css是什么?

animate.css 是一个有趣,酷炫的,跨浏览器的动画库,里面包含了许多常用的css动画。你可以将它用于你的项目中,不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。

在这里插入图片描述

我们要使用的它的话需要把它加到自己的页面中,接着就可以在需要动画的元素标签上直接调用里面的动画,然后调节动画次数延迟等达到自己需要的效果就可以了。

2|0怎么获取 animate.css

1、从官网下载
animate.css 官方下载

2、使用在线cdn
animate.css 在线地址:https://unpkg.com/animate.css@3.5.2/animate.min.css

3|0怎么使用 animate.css

1)引入CSS文件
相信大家对引入外部的CSS样式文件的代码以及快捷键应该很熟悉,你只需要在HTML文件的head标签中引入CSS样式文件,如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animate-test</title> <link href="css/animate.min.css" type="text/css" rel="stylesheet"/> </head> <body> </body> </html>

2)辅助类
给你想添加动画效果的元素添加一个 animated 类(必需)。如果需要动画循环运动,你还需要给这个元素追加 infinite 类,又或者自己另外定义一个类似于 infinite 的类。
3) 效果添加
接下来就是最后一步了,也是最重要的一步,为元素添加你想要的效果所对应的类名就可以查看效果了。简单列举几个:

bounce 弹跳 flash 闪烁 pulse 放大,缩小 rubberBand 放大,缩小,弹簧 shake 左右晃动 headShake 左右小幅晃动 swing 左右扇形摇摆 tada 放大,左右上下晃动,缩小 wobble 左右小幅(圆点较远)扇形摇摆 jello 左右左右上下晃动

实例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animate-test</title> <link href="css/animate.min.css" type="text/css" rel="stylesheet"/> <style type="text/css"> .box{ width:200px; height:200px; background:#CCCCCC } </style> </head> <body> <div class="box animated bounce"></div> </body> </html>

具体动画效果可以自己实际操作,然后运行浏览器查看。

下面来详细介绍animate.css里面的类:

类名 效果
Attention 晃动效果
Bounce 弹性缓冲效果
Fade 透明度变化效果
Flip 翻转效果
Rotate 旋转效果
Slide 滑动效果
Zoom 变焦效果
Special 特殊效果

还有一些辅助类:

infinite 无限循环

delay-1s,delay-2s,delay-3s,delay-4s,delay-5s 延迟

fast,faster 持续时间:快

slow,slower 持续时间:慢

如果你想要改变动画效果,可以自定义配置,如下:

//初始,默认 #yourElement{ animate-duration: 1ms !important; //动画持续时间 transition-duration: 1ms !important; animate-delay: 0; //动画延迟时间 animate-iteration-count: 1 !important; //动画执行次数 }

如果想要动画不停地执行,可以将animate-iteration-count: infinite ,或者直接在元素上添加类 .infinite 。

另外,还有一种使用方法,那就是通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。如下:

$('#yourElement').addClass('animated bounceOutLeft');

当然如果不想要元素使用某个动画效果,也可以通过 jQuery 来删除相应效果的类就可以了,如下:

$('#yourElement').removeClass('animated bounceOutLeft');

4|0兼容

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!


__EOF__

本文作者汪末末
本文链接https://www.cnblogs.com/wmbuke/p/13681311.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   汪末末  阅读(5885)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示