Rumah > Artikel > hujung hadapan web > animate.css是什么意思

animate.css是什么意思

WBOYasal: 2022-09-14 17:01:192614semak imbas

“animate.css”是一个使用css3中animation制作动画效果集合的意思；“animate.css”中预设了很多常用的动画，适合快速使用，同时也方便进行按需修改，语法为“467e0a30c3dba8cf886b143203ba837c”。

animate.css是什么意思

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

animate.css是什么意思

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用

Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。

导入文件

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

给指定元素加上指定的动画样式

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

animated，每一个应用animate.css效果的元素都必须添加这个类名；

bounce，选择你想要的效果的类名添加即可。

如果说想给某个元素动态添加动画样式，可以通过jquery来实现

$(&#39;#element&#39;).addClass(&#39;animated bounce&#39;);

当动画效果执行完成后还可以通过以下代码添加事件

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend&#39;, function);

注意

当效果执行完，元素还在文档流中占据着空间（即使你已经看不到元素），所以如果你想让元素真正消失，要在执行完动画时把元素隐藏起来，如：

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
 animationend&#39;, function(){$(this).hide();});

（学习视频分享：css视频教程、html视频教程）

Atas ialah kandungan terperinci animate.css是什么意思. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css里pc是什么单位Artikel seterusnya：html5中使用什么标签嵌入音频

Artikel berkaitan

Lihat lagi