官网：https://daneden.github.io/animate.css/

animate.css 是一款跨浏览器的动画库。

使用方式：

  1. 在页面的 <head>中引入样式文件：

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

  2. 给你想要添加动画效果的元素加上 animated 样式，如果想要动画循环执行的话，你需要加上 infinite 样式。

  3. 具体样式在官网一一列举出来啦，而且可以直接查看效果，很炫酷啊！

例子：

<h1 class="animated infinite bounce">Example</h1>

当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时， 你可以用 animate.css 做一大堆其他的事，使用 jQuery 动态添加动画：

$('#yourElement').addClass('animated bounceOutLeft');

你也可以检测一个动画是否结束了：

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

注意： jQuery.one() 用在你希望只执行事件一次 的时候。

你可以改变动画的持续时间，添加延迟或改变它执行的次数：

#yourElement {

  -vendor-animation-duration: 3s;

  -vendor-animation-delay: 2s;

  -vendor-animation-iteration-count: infinite;

}

注意：确保用供应商的前缀（webkit, moz, 等等）来替换上面CSS中的 vendor

Animate.css(一款有意思的CSS3动画库)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. Css3动画库收集

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

  9. CSS3 -- 动画库

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

随机推荐

  1. # 2019-2020-3 《Java 程序设计》第三周总结

    2019-2020-3 <Java 程序设计>第三周知识总结 1.类的定义 语法格式如下(加[]表示可选项): [修饰符] class 类名 { 属性定义(声明) 方法定义(声明)} 2. ...

  2. 小白的CTF学习之路1——程序与CPU

    刚刚注册了这个博客园,尽量保持每日一更(*/ω＼*) 今天看了po学院的教学视频,了解了程序是什么,如何在CPU当中工作的等各种之前未曾想过的问题,特此记录,以防忘记 首先我们学习程序与CPU之前需要 ...

  3. 2019.02.17 spoj Query on a tree VI（链分治）

    传送门 题意简述:给你一棵nnn个黑白点的树,支持改一个点的颜色,询问跟某个点颜色相同的连通块大小. 思路: 还是链分治 233 记fi,0/1f_{i,0/1}fi,0/1​表示iii的所有颜色为0 ...

  4. mysql8.0 linux 安装

    1.下载 mysql-8.0.15-linux-glibc2.12-x86_64.tar.xz 2.解压 tar -xvf mysql-8.0.15-linux-glibc2.12-x86_64.ta ...

  5. uart通讯协议

    本次设计的源码在http://download.csdn.net/detail/noticeable/9912383 下载 实验目的:通过uart通讯协议的编写,了解FPGA的通讯协议编写的方法. 实 ...

  6. 关于SQL\SQL Server的三值逻辑

    在SQL刚入门的时候,我们筛选为某列值为NULL的行,一般会采用如下的方式: SELECT * FROM Table AS T WHERE T.Col=NULL 而实际上此种写法无法得到想要的结果.此 ...

  7. Dynamic Programming | Set 4 (Longest Common Subsequence)

    首先来看什么是最长公共子序列:给定两个序列,找到两个序列中均存在的最长公共子序列的长度.子序列需要以相关的顺序呈现,但不必连续.例如,"abc", "abg", ...

  8. 在Azure DevOps Server（TFS系统）中部署回退/回滚方案（Rollback)

    概述 Azure DevOps Server(之前名TFS)是微软公司实现软件研发.测试和部署一体化的全流程解决方案.在近几年的研发过程中,Azure DevOps Server 大幅增强了软件部署过 ...

  9. Linux下的redis的持久化,主从同步及哨兵

    redis持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失, 为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持久 ...

  10. Android：weight，margin，padding详解实例

    weight详解 weight是用来等比例划分区域的属性. 案例代码 <LinearLayout xmlns:android="http://schemas.android.com/a ...