动画库animate.css的用法

简介

animate.css是一个来自国外的 CSS3 动画库，它预设了引发弹跳（bounce）、摇摆（swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fade）、滑动（Sliding）、光速（lightspeed）、缩放变焦（Zoom）、翻滚（roll）等多达 70 多种动画效果，借助 animate.css 可以很方便、快速的制做 常见的动画效果。固然animate.css只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

一、引入文件
<link rel="stylesheet" href="animate.min.css">


二、在html中调用
<h1 class="animated bounceOut">Animate.css</h1>
给元素加上class属性，animated是必须加的，bounceOut是动画效果的名称。


也能够使原生JS或得Jquery动态添加使用动画,只要在须要动画的元素的class上加对应的动画名称便可，好比

$(function(){
    $('#jqhtml').addClass('animated bounce');
});

animate.css 的默认设置也许有些时候并非咱们想要的，因此你能够从新设置，好比：

#jqhtml{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

在线演示

示例

如下是前端库为你们收集的特效
66种基于animate.css的CSS消息提示动画效果
基于magnific-popup.js和animate.css的响应式lightbox特效
基于Animate.css的炫酷jQuery消息通知框插件
SVG文字动画特效插件AnimatedLetters
基于Animate.css的jQuery全屏幻灯片插件

下载地址

http://www.jqhtml.com/910.html