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. Java集合类小结-思维导图

    java集合类分为collection 和 map两类Collection List ArrayList LibnkedList Vector Set HashSet TreeSet LinkedHa ...

  2. 基于jenkins搭建一个持续集成服务器

    1 引言 1.1 编写目的 指导质量管理部,业务测试组同事进行Jenkins环境部署,通过Jenkins解决测试环境不可控,开发测试环境不一致等问题. 1.2 使用对象 质量管理部.基础研发部,集成部 ...

  3. Ubuntu彻底删除/卸载mysql,php,apache

    一.卸载删除 mysql 1 sudo apt-get autoremove --purge mysql-server-5.02 sudo apt-get remove mysql-server3 s ...

  4. (转)Spring中ThreadLocal的认识

    我们知道Spring通过各种DAO模板类降低了开发者使用各种数据持久技术的难度.这些模板类都是线程安全的,也就是说,多个DAO可以复用同一个模板实例而不会发生冲突.我们使用模板类访问底层数据,根据持久 ...

  5. (转)mysql水平分表和垂直分表和数据库分区

    坚信数据库的物理设计在对高级数据库的性能影响上远比其他因素重要.给大家说一下经过专家对Oracle的研究,他们解释了为什么拙劣的物理设计是数据库停机(无论是有计划的还是没计划的)背后的主要原因.但在这 ...

  6. PHP通过phpmailer批量发送邮件功能

    前端页面代码: 注意:目前发送人使用的qq邮箱支持的不是特别友好.建议使用网易 新浪 163等其他邮箱. 需要用到phpmailer包 下载地址:https://sourceforge.net/pro ...

  7. [BZOJ1500][NOI2005]维修数列---解题报告

    Portal Gun:[BZOJ1500][NOI2005]维修数列 有一段时间没写博客了,最近在刚数据结构......各种板子背得简直要起飞,题目也是一大堆做不完,这里就挑一道平衡树的题来写写好了 ...

  8. 9.Spark Streaming

    Spark Streaming 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性 ...

  9. 聪聪和可可[NOI2005]

    [问题描述] 在一个魔法森林里,住着一只聪明的小猫聪聪和一只可爱的小老鼠可可.虽然灰姑娘非常喜欢她们俩,但是,聪聪终究是一只猫,而可可终究是一只老鼠,同样不变的是,聪聪成天想着要吃掉可可. 一天,聪聪 ...

  10. Red Hat 9.0 Linux 分辨率修改

    Red Hat 9.0 Linux 分辨率修改 我是在VMware Workstation中装了一个红帽的Linux系统,装上之后发现分辨率有点低,是800x600的,看着很不舒服,然后就想着怎么样可 ...