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（第三方动画使用方法）的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  3. Animate.css 前端动画开发教程

    1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/  ,选择好后记住动画的名字在你下载的a ...

  4. vue animate.css训练动画案例 列表循环

    制作目标动画:向上入场添加数据,点击数据右滑动离场 简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta c ...

  5. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  6. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  7. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  8. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

  9. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

随机推荐

  1. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  2. .NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper

    好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...

  3. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  4. 理解 .NET Platform Standard

    相关博文:ASP.NET 5 Target framework dnx451 and dnxcore50 .NET Platform Standard:https://github.com/dotne ...

  5. C++随笔：.NET CoreCLR之GC探索（4）

    今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...

  6. MySQL优化聊两句

    原文地址:http://www.cnblogs.com/verrion/p/mysql_optimised.html MySQL优化聊两句 MySQL不多介绍,今天聊两句该如何优化以及从哪些方面入手, ...

  7. golang sync.WaitGroup bug

    注意,这个结构体,要是想在函数之间传来传去的话,必须要使用指针....... 这个结构体里没有 指针,这个类型可以说没有“引用特性”. 被坑了一晚上.特此记录.

  8. SQL-union

    集合运算符是对两个集合操作的,两个集合必须具有相同的列数,列具有相同的数据类型(至少能隐式转换的),最终输出的集合的列名由第一个集合的列名来确定.(可以用来连接多个结果)联合(union)与连接(jo ...

  9. .NET面试题系列[2] - .NET框架基础知识(2)

    3 程序集 面试出现频率:虽然很重要但不怎么出现,可能会考你定义,以及程序集包括什么,然后自然的话题就跑到反射上去了. 重要程度:8/10,很重要 需要理解的程度:知道程序集包括IL和元数据.知道元数 ...

  10. 【腾讯bugly干货分享】微信Android热补丁实践演进之路

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1264& ...