Animate.css介绍

最新推荐文章于 2024-03-13 10:04:34 发布

weixin_30795127

最新推荐文章于 2024-03-13 10:04:34 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiukang/p/8979276.html

版权

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>

转载于:https://www.cnblogs.com/xiukang/p/8979276.html

weixin_30795127

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Animate.css介绍

Animate.css简介animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。Animate.css下载百度云盘下载链接Animate.css动画演示演示地址Anim...
复制链接

扫一扫