animate.css（第三方动画使用方法）
animation
语法:
animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction: 规定是否应该轮流反向播放动画。
浏览器兼容：
当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
/*首先要引入animate.css*/
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
} /*第三方的第二种用法*/
.div2{
width: 100px;
height: 100px;
background: yellowgreen;
margin: 300px auto;
animation: bounce 3s infinite;
}
</style>
</head>
<body>
<!--第三方动画库的使用
1.名字叫:animate.css
2.封装了很多工作中常用的动画
3.*在使用第三方时候,需要加上animated类名
-->
<!--主要分类:可以参考官网自己设置
bounce:弹性动画类
flash:逐渐消失
pulse:脉冲动画
shake:抖动
-->
<!--第一种使用方法-->
<div class="div1 animated bounceIn infinite "></div> <div class="div2"></div>
</body>
</html>
animate.css（第三方动画使用方法）的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- Animate.css 前端动画开发教程
1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/ ,选择好后记住动画的名字在你下载的a ...
- vue animate.css训练动画案例 列表循环
制作目标动画:向上入场添加数据,点击数据右滑动离场 简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- vue中使用animate.css实现动画
参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- JQuery插件之Animate.css和 jquery-aniview
Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...
- 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
随机推荐
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- win7安装时，避免产生100m系统保留分区的办法
在通过光盘或者U盘安装Win7操作系统时,在对新硬盘进行分区时,会自动产生100m的系统保留分区.对于有洁癖的人来说,这个不可见又删不掉的分区是个苦恼.下面介绍通过diskpart消灭保留分区的办法: ...
- PC分配盘符的时候发现==》RPC盘符不可用
服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...
- 破解SQLServer for Linux预览版的3.5GB内存限制 (RHEL篇)
微软发布了SQLServer for Linux,但是安装竟然需要3.5GB内存,这让大部分云主机用户都没办法尝试这个新东西 这篇我将讲解如何破解这个内存限制 要看关键的可以直接跳到第6步,只需要替换 ...
- 搭建属于自己的VIP积分系统(1)
很久没写博客了,如果有写得不好的地方,还请多多见谅. 架构设计 需求分析 这篇文章主要是介绍此VIP系统的基础架构.说实在的,我其实对 架构方面也不是很懂,我这套框架 还是拿别人的东西改过来的,并不是 ...
- 编写自己的PHP MVC框架笔记
1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...
- windows下 安装 rabbitMQ 及操作常用命令
rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...
- 如何使用dos命令打开当前用户、当前日期、当前时间以及当前用户加当前时间？
1.dos命令安装mysqld --stall.启动net start mysql.进入MySQL数据库mysql -uroot -p后,输入select user();当前用户 select cur ...
- 在Mac OS X上安装ASP.NET 5（译文）
ASP.NET 5 运行在包括OS X的可用于多个平台的.NET Execution Environment(DNX)上.本文介绍如何在OS X上通过HomeBrew安装DNX和ASP.NET 5. ...
- ASP.NET跨平台最佳实践
前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java ...