官网：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. 用TSQL从sqlserve 发布订阅链中删除一张或几张表

    一个简单的存储过程,用来实现从一个SQLSERVE 发布订阅链中删除一张或几张表. /* 1.停日志读取代理 2.exec usp_从复制订阅中删除表 'dbtestPub','test1' 3.开日 ...

  2. 查看memcached连接数

    netstat -n | grep : | wc -l

  3. To me

    1.流泪的时候不做任何决定: 2.不反复思考同一个问题: 3.不害怕做错什么: 4.有负面情绪是正常的: 5.一切的烦恼都是自找的: 6.说过的话一定要做到: 7.不要去害怕做一件事: 8.无论是对是 ...

  4. Configuration Error: deployment source 'SocietyManage:war exploded' is not valid

    Configuration Error: deployment source 'SocietyManage:war exploded' is not valid 原因:没有下图的底下的红色框的内容.( ...

  5. s32 kickstart 批量自动安装系统

    1. 自动安装操作系统 http://blog.oldboyedu.com/autoinstall-kickstart/   自动安装操作系统的解决方案:kickstart.cobbler(披着web ...

  6. VsCode编写和调试.NET Core

    本文转自:https://www.cnblogs.com/Leo_wl/p/6732242.html 阅读目录 使用VsCode编写和调试.NET Core项目 回到目录 使用VsCode编写和调试. ...

  7. thinkphp 5.1 同时选中多个文件上传

    <form id="ajaxform" enctype="multipart/form-data" class="form"> ...

  8. Paper | Residual learning

    目录 1. OVERVIEW 2. DEGRADATION 3. SOLUTION(DEEP RESIDUAL LEARNING) 4. IMPLEMENTATION(SHORTCUT CONNECT ...

  9. C++顺序容器之list初探

    C++顺序容器之list初探 双向链表,支持双向顺序访问.在list中任何位置进行插入和删除速度都很快. list不支持随机访问,为了访问一个元素,必须遍历整个容器. #include<iost ...

  10. 基于dsp_builder的算法在FPGA上的实现（转自https://www.cnblogs.com/sunev/archive/2012/11/17/2774836.html）

    一.摘要 结合dsp_builder.matlab.modelsim和quartus ii等软件完成算法的FPGA实现. 二.实验平台 硬件平台:DIY_DE2 软件平台:quartus ii9.0 ...