Animate.css介绍
程序员文章站
2022-04-09 20:21:46
Animate.css简介 animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 Anim ......
Animate.css简介
animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
Animate.css下载
Animate.css动画演示
Animate模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引用animate文件 --> <link rel="stylesheet" href="css/animate.min.css"/> </head> <body> </body> </html>
- 添加一个动画
<!-- animated类似与全局变量，定义动画持续时间 --> <!-- bounce具体动画的名称 --> <div class="animated bounce"> Animate.css </div>
- 定义播放次数
<!-- infinite定义动画无限播放 --> <div class="animated bounce infinite"> Animate.css </div>
- 通过JavaScript或jQuery添加Animate动画
<div>
Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过jQuery添加animate动画 -->
<script>
$('div').addClass('animated bounce');
</script>
- 添加定时器，5秒后删除animate无限播放效果
<div>
Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过JavaScript或jQuery添加animate动画 -->
<script>
$('div').addClass('animated bounce infinite');
setTimeout(function(){
$("div").removeClass("infinite");
},5000)
</script>