《layui宇宙版教程》：CSS3动画类
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.6 CSS3动画类
在以实用的前提下，Layui并没有内置过多花俏的动画。而他们同样在Layui的许多交互元素中发挥着重要的作用。Layui的动画全部采用CSS3实现，因此不支持ie8和部分不支持ie9（即在ie8/9中无动画效果）。
1.6.1 使用方式
动画的使用非常简单，直接对元素赋值动画特定的class类名即可。
测试代码如下：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js">script>
head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<br />
<div class="layui-anim layui-anim-up">a<br />b<br />c<br />div>
循环动画，追加：layui-anim-loop
<br />
<div class="layui-anim layui-anim-up layui-anim-loop">1<br />2<br />3<br />div>
div>
div>
body>
html>
1.6.2 内置CSS3动画一览表
测试代码如下：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js">script>
<script src="js/jquery3.5.1.js">script>
head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<div id="div1" class="layui-anim layui-anim-up" style="background-color: red;">layui-anim-up从最底部往上滑入div>
<br />
<div id="div2" class="layui-anim layui-anim-upbit" style="background-color: green;">layui-anim-upbit微微往上滑入div>
<br />
<div id="div3" class="layui-anim layui-anim-scale" style="background-color: blue;">layui-anim-scale平滑放大div>
<br />
<div id="div4" class="layui-anim layui-anim-scaleSpring" style="background-color: red;">layui-anim-scaleSpring弹簧式放大div>
<br />
<div id="div5" class="layui-anim layui-anim-fadein" style="background-color: green;">layui-anim-fadein渐现div>
<br />
<div id="div6" class="layui-anim layui-anim-fadeout" style="background-color: blue;">layui-anim-fadeout渐隐div>
<br />
<div id="div7" class="layui-anim layui-anim-rotate" style="background-color: red;">layui-anim-rotate360度旋转div>
<br />
<div id="div8" class="layui-anim layui-anim-up layui-anim-loop" style="background-color: green;">追加：layui-anim-loop循环动画div>
div>
div>
<script>
$("#div1").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-up");
setTimeout(function() {
$(othis).addClass("layui-anim-up");
});
});
$("#div2").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-upbit");
setTimeout(function() {
$(othis).addClass("layui-anim-upbit");
});
});
$("#div3").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-scale");
setTimeout(function() {
$(othis).addClass("layui-anim-scale");
});
});
$("#div4").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-scaleSpring");
setTimeout(function() {
$(othis).addClass("layui-anim-scaleSpring");
});
});
$("#div5").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-fadein");
setTimeout(function() {
$(othis).addClass("layui-anim-fadein");
});
});
$("#div6").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-fadeout");
setTimeout(function() {
$(othis).addClass("layui-anim-fadeout");
});
});
$("#div7").click(function() {
var othis = $(this);
$(othis).removeClass("layui-anim-rotate");
setTimeout(function() {
$(othis).addClass("layui-anim-rotate");
});
});
$("#div8").click(function() {
var othis = $(this);
if ($(othis).hasClass("layui-anim-loop")) {
$(othis).removeClass("layui-anim-loop");
return;
}
$(othis).removeClass("layui-anim-up");
setTimeout(function() {
$(othis).addClass("layui-anim-up");
$(othis).addClass("layui-anim-loop");
});
});
script>
body>
html>