Animate css3动画 使用文档

原创 2016年08月30日 16:08:39

1.先引入animate.min.css 文件。
下载网址:http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css

2.效果实现有两种方式:

2.1给指定的元素加上类 “animated bounceOutLeft” ,animate是基本类 必须加上,而后一个就是根据自己想要的效果来增加类。
2.2添加动态效果,可以用jq来实现

$('#yourElement').addClass('animated bounceOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
   $(this).removeClass();
})

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

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

整理的压缩包下载: http://pan.baidu.com/s/1nuDrHhv

版权声明:本文为博主原创文章,未经博主允许不得转载。

强大而酷炫的CSS3动画库Animate.css使用方法

今天介绍一个强大的CSS3库 Animate.css 库如其名 ,是一个动画库 通过它我们非常轻松地添加动画效果 “Just-add-water CSS animations” 像灌水一样简...
  • q1056843325
  • q1056843325
  • 2016年12月23日 12:00
  • 2936

css3 animation与jQuery animate()区别

css3 animation与jQuery animate()区别在于实现机制不同: 1.css3中的过渡和animation动画都是基于css实现机制的,属于css范畴之内,并没有涉及到任何语言操...
  • u012698342
  • u012698342
  • 2017年04月03日 16:30
  • 753

制作微信单页,全屏浏览,网站动画,CSS3动画,animate.css是一个不错的选择

Animate.css是一个有趣的,跨浏览器的css3动画库。很值得我们在项目中引用。 用法 1、首先引入animate css文件 1 2 ...
  • qq_30632003
  • qq_30632003
  • 2016年12月29日 10:41
  • 562

手机css3动画与animate动画流畅度比较

在手机端制作滚屏效果的js插件时,为了实现屏幕滚动效果,使用了jQuery的animate函数,如下:this.$main.stop(true,true).animate({ ...
  • buaabyy
  • buaabyy
  • 2015年11月07日 22:05
  • 4452

Jquery使用animate实现css3的transform动画效果

首先,Jquery并不支持在animate的样式中的transform效果,这里通过使用animate的回调函数来实现。 $(xxx).animate({},function(){          ...
  • u012078162
  • u012078162
  • 2017年05月28日 00:35
  • 5823

CSS3 动画卡顿解决方案

前端时间用 animation 实现 H5 页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留 700ms 后再缩小至顶部。代码如下 html> head lang="zh-...
  • yeana1
  • yeana1
  • 2016年10月08日 15:21
  • 11186

SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子

今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了。不过测试体验感觉手机上没有 jQuery ...
  • zsjangel
  • zsjangel
  • 2016年06月01日 00:34
  • 5365

【CSS3】异步动画

css3实现异步动画
  • jean_lee
  • jean_lee
  • 2015年07月10日 14:38
  • 838

jQuery动画animate停止方法stop使用介绍

Panel *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { w...
  • u011102207
  • u011102207
  • 2015年08月26日 16:38
  • 4168

Animate.css 基础使用方法

animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用。用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了。 用法 在您的网站上使用anima...
  • laike1355
  • laike1355
  • 2016年05月09日 17:39
  • 10739
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Animate css3动画 使用文档
举报原因:
原因补充:

(最多只允许输入30个字)