Animate.css介绍
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>
Animate.css介绍的更多相关文章
- animate.css的使用
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用 引入 anim ...
- React 系列教程 1：实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- vue与animate.css的结合使用
在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- CSS动画框架Loaders.css +animate.css
CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...
- vue项目中引入animate.css和wow.js
本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...
随机推荐
- angularjs ui-view多视口多层嵌套路由配置
最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...
- 如何解决css-子div设置margin-top后，父div与子div一起下移的bug?
根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 这是规范引起的普遍问题. 只要给父盒子设 ...
- hibernate、java、数据库对应类型
引自 https://my.oschina.net/heau/blog/498874 java.数据库对应类型 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 ...
- 重装系统，打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store
重装系统,打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store. 项目的属性-> ...
- libgdx自问自答
1.使用gdx-steup.jar生成的desktop项目导入idea运行报如下错误,如何解决? 答:原因是assets目录默认是普通目录,idea编译项目时不会把普通目录下的内容输出到classpa ...
- linux 自启动 ,让生活更美好!!
systemctl enable svnserve.service systemctl enable iptables.service systemctl enable firewalld.servi ...
- Azure 和 Linux
Azure 正在不断集结各种集成的公有云服务,包括分析.虚拟机.数据库.移动.网络.存储和 Web,因此很适合用于托管解决方案. Azure 提供可缩放的计算平台,允许即用即付,而无需投资购买本地硬件 ...
- mongodb/python3.6/mysql的安装
1 下载与解压 在官网下载mongodb安装包 tar -zxvf mongodb-linux-x86_64-ubuntu1604-3.4.0.tgz 2 移动安装文件 sudo mv mongodb ...
- ArrayBlockingQueue 阻塞队列和 Semaphore 信号灯的应用
import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; public cl ...
- Linux wget命令详解
wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器. wget支持HTTP,HTTPS和FTP协议,可以使用HT ...