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

简单使用

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

cdn文件

  1. <head>
  2. <link rel="stylesheet"
  3. href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  4. </head>

下载到本地

  1. <head>
  2. <link rel="stylesheet" href="animate.min.css">
  3. </head>

  

2 给指定元素止指定样式

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

  1.    
  1. <div id="demoimg" class="animated infinite bounce">
  2. <img style="width: 200px; height: 200px;" src="http://img.siyouku.cn/img24.jpg" />
  3. </div>

  

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

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

  

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

  1. #demoimg
  2. {
  3. -vendor-animation-duration: 3s; //动画持续时间
  4. -vendor-animation-delay: 2s; //动画延迟时间
  5. -vendor-animation-iteration-count: infinite; //动画执行次数,这里是一直执行
  6. }

  

相关链接

动画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. FreeRTOS——资源管理

    1. 多任务系统存在一个潜在的风险:资源管理. 2. 基本临界区:taskENTER_CRITICAL() 与 taskEXIT_CRITICAL() 或 taskENTER_CRITICAL_FRO ...

  2. EL函数和自定义EL函数

    简介 EL原本是JSTL1.0中的技术(所以EL和JSTL感情如此好就是自然的了),但是从JSP2.0开始,EL就分离出来纳入了JSP的标准了.但是EL函数还是和JSTL技术绑定在一起.下面将介绍如何 ...

  3. (转)FastJson---高性能JSON开发包

    场景:javaBean对象转化为json对象! 1 Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器,由阿里巴巴公司开发.1.遵循http://json.org标准,为其官 ...

  4. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  5. [学习笔记] Splay Tree 从入门到放弃

    前几天由于出行计划没有更博QwQ (其实是因为调试死活调不出来了TAT我好菜啊) 伸展树 伸展树(英语:Splay Tree)是一种二叉查找树,它能在O(log n)内完成插入.查找和删除操作.它是由 ...

  6. readelf相关命令

    -a --all 显示全部信息,等价于 -h -l -S -s -r -d -V -A -I. -h --file-header 显示elf文件开始的文件头信息. -l --program-heade ...

  7. ECMAScript6新特性之let、const

    第一次在博客园写博客,想把自己每一天学习到的知识点记录下来,心里有点紧张(PS:不知道自己能不能写好......嘿嘿).言归正传,咱们先来说说"ECMAScript"这到底是啥玩意 ...

  8. Java中实现十进制数转换为二进制的三种思路

    Java中实现十进制数转换为二进制 第一种:除基倒取余法 这是最符合我们平时的数学逻辑思维的,即输入一个十进制数n,每次用n除以2,把余数记下来,再用商去除以2...依次循环,直到商为0结束,把余数倒 ...

  9. Uva 10142 Australia Voting

    水题 模拟 大意就是模拟一个选举的系统 认真读题,注意细节,耐心调试 #include<cmath> #include<math.h> #include<ctype.h& ...

  10. HDU 6097---Mindis(二分)

    题目链接 Problem Description The center coordinate of the circle C is O, the coordinate of O is (0,0) , ...