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/ ...
随机推荐
- java注册后缀样式（ajax提示）
方法位置 <FORM id=form1 name=form1 action = "${pageContext.request.contextPath }/user_regist.act ...
- 使用IntelliJ IDEA配置Erlang开发环境
这篇文章比较详细,感谢作者,拷贝过来做个记录 ————————————————————————————————————————————————————————————————————————————— ...
- 在android工程中，res目录下又有anim、drawable、layout、menu、raw、values和xml文件夹，分别用来保存？
res目录主要是存放资源文件的!layout 布局 这个就是你经常看到的与用户交互的界面的 xml 文件,就是各个 view 的排列和嵌套,没什 么好说的啦 风格和主题. 风格主要是指 view 的显 ...
- 2018-10-15 00:41:45 c language
2018-10-15 00:41:45 c language C语言输入法的选择 全角和半角的区别主要在于除汉字以外的其它字符,比如标点符号.英文字母.阿拉伯数字等,全角字符和半角字符所占用的位置的 ...
- 'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
npm updatea -g 很严重,把本地npm安装包都更新了,跟项目npm安装包版本不一,导致 意思是版本冲突,手动卸载了,重新安装还是最新版本,很是头疼.找同事的电脑拷贝了一份,然后复制过来报“ ...
- elipse安装php
在用eclipse作为PHP的开发IDE工具时,如果下载的Eclipse不带有PHP功能,则需要我们自己来给Eclipse升级.不过也可以下载eclipseForPHP 在Eclipse的help菜单 ...
- ORAchk-数据库健康检查好帮手
ORAchk 之前被称为RACcheck,后来它的检查范围进行了扩展,改名为了ORAchk,它是在数据库系统进行健康检查的一个专用工具,这个工具主要用来检查软件的配置是否符合要求以及一些最佳实践是否被 ...
- 一次存储链路抖动因I/O timeout不同在AIX和HPUX上的不同表现(转)
去年一个故障案例经过时间的沉淀问题没在发生今天有时间简单的总结一下,当时正时午睡时分,突然告警4库8个实例同时不可用,这么大面积的故障多数是有共性的关连,当时查看数据库DB ALERT日志都是I/O错 ...
- 常用CSS技术收藏
常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM ...
- Nexus 3.X（Maven仓库私服）仓库迁移与备份
Linux 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,该目录的位置由nexus/conf/nexus.properties配置文件指定.仓库迁移需要两个过程:备份和还原 ...