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

最新推荐文章于 2023-11-26 12:18:36 发布

汪末末

最新推荐文章于 2023-11-26 12:18:36 发布

阅读量2.2k

点赞数 1

分类专栏： # animate.css 文章标签： animate.css 前端动画

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108628374

版权

animate.css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

animate.css是什么？

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

在这里插入图片描述

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

怎么获取 animate.css

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

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

怎么使用 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');

兼容

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

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

汪末末

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
animate.css 动画库的下载与使用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinanimate.css是什么？animate.css 是一个有趣，酷炫的，跨浏览器的动画库，里面包含了许多常用的css动画。你可以将它用于你的项目中，不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。怎么获取 animat
复制链接

扫一扫