Animate.css 一款牛逼的css3动画库

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; //动画执行次数,这里是一直执行

}

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

Animate.css 一款强大的预设css3动画库
Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animate css文件 <head> <link rel="s ...
animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库演示下载简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
腾讯开源的轻量级CSS3动画库：JX.Animate
JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...
CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
Css3动画库收集
1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAn ...
CSS3 -- 动画库
http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...
Animate.css(一款有意思的CSS3动画库)
官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...

随机推荐

nyoj_323:Drainage Ditches（网络流入门）
题目链接网络流入门@_@,此处本人用的刘汝佳的Dinic模板 #include<bits/stdc++.h> using namespace std; const int INF = 0 ...
ES6函数扩展
前面的话函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES ...
Storm/JStorm之TopologyBuilder源码阅读
在Strom/JStorm中有一个类是特别重要的,主要用来构建Topology的,这个类就是TopologyBuilder. 咱先看一下简单的例子: public static void main(S ...
PHP 调用 Go 服务的正确方式 - Unix Domain Sockets
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
BFC基础分析
W3C官方对于BFC的描述只有3小段,强烈建议想理解BFC的朋友先去看看,链接见文末. 常见的文档流分为:定位流.浮动流.普通流3种.BFC是普通流中的一种. 本文提出3个问题并给出使用BFC来解决这 ...
Redux源码分析之基本概念
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
Dubbo实战快速入门（转）
Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...
LoadRunner入门（二）
三.设计场景 1.打开Controller 2.选择运行的脚本 3.场景设置 3.1修改场景模式点击scenario-convert- 修改场景百分比模式 (1)Group Name:脚本名称 (2 ...
电机PID调试注意（待补充）
1.速度传感器返回值要处理好,要和目标值同一单位,这样方便以后的计算 2.PID初始化要准确 3.输出给定要设定一个阈值,防止电机转速太大.
pwnable.kr memcpy之write up
// compiled with : gcc -o memcpy memcpy.c -m32 -lm #include <stdio.h> #include <string.h> ...