Animate.css是一款很牛逼的，跨浏览器的css3动画库，使用方法也很简单只要引入一个animate.min.css就可以了，

简单使用

1 首先引入 animate的 css 文件样式

cdn文件

 <head>

        <link rel="stylesheet"

              href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  </head>

下载到本地

 <head>

       <link rel="stylesheet" href="animate.min.css">

 </head>

　　

2 给指定元素止指定样式

我们看到有三个class ，其中第一个animated  是基本样式，所有要产生动画的元素都需要，第二个infinite是可          选的,如果加了这个类，动画将循环执行，第三个就是动画特效了 ，目前animated 已经有很多动画特效了具体可          以点击这里查看 www.siyouku.cn/wenqing/animation

   
 <div id="demoimg" class="animated infinite bounce">

      <img style="width: 200px; height: 200px;" src="http://img.siyouku.cn/img24.jpg" />

 </div>

　　

3 当动画效果执行完成可以通过以下代码添加事件

$('#demoimg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

　　

4 有时候我们需要自定我们对动画的一些设置我们可以用下面的代码实现

#demoimg

  {

   -vendor-animation-duration: 3s; //动画持续时间

   -vendor-animation-delay: 2s; //动画延迟时间

   -vendor-animation-iteration-count: infinite; //动画执行次数,这里是一直执行

}

　　

相关链接

动画demo：www.siyouku.cn/wenqing/animation

github：github.com/daneden/animate.css

本文永久更新地址：www.siyouku.cn/article/6827.html

Animate.css 一款牛逼的css3动画库的更多相关文章

  1. Animate.css 一款强大的预设css3动画库

    Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animate css文件 <head> <link rel="s ...

  2. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  3. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  4. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  5. 腾讯开源的轻量级CSS3动画库：JX.Animate

          JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...

  6. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  7. Css3动画库收集

    1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAn ...

  8. CSS3 -- 动画库

    http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...

  9. Animate.css(一款有意思的CSS3动画库)

    官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...

随机推荐

  1. JavaScript-DOM编程的一些常用属性

    一.Document常见属性 document.title // 设置文档标题等价于HTML的title标签 document.bgColor // 设置页面背景色 document.fgColor ...

  2. （转）上传jar包到nexus私服

    场景:在使用私服Nexus时候经常需要上传jar包,但是对上传jar包的方式不是很熟悉,所以很有必要学习下. 1 通过网页上传 GAV Definition:选择GAV Parameters 输入JA ...

  3. 【PHP】数据类型转换

    PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: (int).(integer):转换成整形 (float).(double).(real):转换成浮点型 (string):转换成字符串 ...

  4. perl的INC设置

    perl中的INC变量中包含了所有的perl module的查找路径. 可以使用perl -V 来查看INC的值. 1)默认地INC如下: @INC:    C:/Perl/site/lib    C ...

  5. yum 源问题

    YUM源搭建 1.yum源是yum安装的获取源地,yum  = 红帽包管理 echo /dve/sr0 /media ios9660 defaults 0 0 >> /etc/fstab ...

  6. 初学Python（六）——输入输出

    初学Python(六)——输入输出 初学Python,主要整理一些学习到的知识点,这次是输入输出. 输入: # -*- coding:utf-8 -*- ''''' python中的输出为print ...

  7. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  8. 一步一步深入理解Dijkstra算法

    先简单介绍一下最短路径: 最短路径是啥?就是一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两顶点之间经过的边上权值之和最小的路径. 并且我们称路径上的第 ...

  9. year:2017 month:8 day:1+

    2017-08-01 JAVAse 方法的重载:在同一个类中存在一个以上的同名方法,只要他们的参数数量,参数类型,参数顺序(两个相同类型的参数是不行的)这样就构成了方法的重载. 有返回值的方法有三种调 ...

  10. nopCommerce 3.9 大波浪系列 之 可退款的支付宝插件（下）

    一.回顾 支付宝插件源码下载地址:点击下载 上篇介绍了使用支付宝插件进行支付,全额退款,部分退款还有插件的多店铺配置,本文介绍下如何实现的. 二.前期准备 插件主要有3个功能: 多店铺插件配置 支付功 ...