Animate.css介绍
程序员文章站
2022-07-05 11:44:18
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>
推荐阅读
-
Unix/Linux系统下的nobody用户与nologin详细介绍
-
详细介绍Opencv实现张正友法相机标定
-
phonegap使用方法介绍(三)克隆和删除联系人
-
CSS3中background-clip和background-origin的区别示例介绍
-
PHP-Mmecache操作类详细介绍
-
MySQL的存储引擎介绍与操作
-
OPENCV_PYTHON官方文档学习_33.介绍 SIFT(Scale-Invariant Feature Transform)
-
Python的主要应用领域有哪些?Python的介绍
-
有关phpmailer的详细介绍及使用方法_php技巧
-
解析PHP跳出循环的方法以及continue、break、exit的区别介绍_PHP教程