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. 隐私泄露杀手锏 —— Flash 权限反射

    [简版:http://weibo.com/p/1001603881940380956046] 前言 一直以为该风险早已被重视,但最近无意中发现,仍有不少网站存在该缺陷,其中不乏一些常用的邮箱.社交网站 ...

  2. C语言 · 判定数字

    编写函数,判断某个给定字符是否为数字. 样例输入 9 样例输出 yes #include<stdio.h> int main(){ char c; scanf("%c" ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（68）-微信公众平台开发- 资源环境准备

    系列目录 前言: 本次将学习扩展企业微信公众号功能,微信公众号也是企业流量及品牌推广的主要途径,所谓工欲善其事必先利其器,调试微信必须把程序发布外网环境,导致调试速度太慢,太麻烦! 我们需要准备妥当才 ...

  4. 从零开始编写自己的C#框架（27）——什么是开发框架

    前言 做为一个程序员,在开发的过程中会发现,有框架同无框架,做起事来是完全不同的概念,关系到开发的效率.程序的健壮.性能.团队协作.后续功能维护.扩展......等方方面面的事情.很多朋友在学习搭建自 ...

  5. Lambda

    Lambda Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可作为参数传递或作为函数调用值返回的本地函数. Lambda 表达式对于编写 LI ...

  6. 在centos7上安装ClamAV杀毒，并杀毒（centos随机英文10字母）成功

    前言 上传文件的时候发现总是失败,查看top发现有个进程一直cpu占用80%以上,而且名称还是随机数.kill之后,一会儿又重新生成了.突然发现居然没有在服务端杀毒的经历.在此处补齐. 安装clama ...

  7. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  8. C#制作简易屏保

    前言:前段时间,有个网友问我C#制作屏保的问题,我瞬间懵逼了(C#还可以制作屏保!).于是我去查阅相关资料,下面把C#如何制作屏保的过程及我学习过程的心得也记录下来,希望对需要的人能有帮助. 基本思路 ...

  9. ,net core mvc 文件上传

    工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvi ...

  10. Nginx学习笔记--001-Nginx快速搭建

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...