日期:2012-8-12 来源:GBin1.com
在线演示
本地下载
通常情况下如果需要生成web动画效果的话,我们肯定会考虑使用一些类库或者jQuery的animate方法,那么有什么方便的方法来快速实现动画效果呢?
在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan Eden
开发和设计的。使用它能够很方便的给你的页面元素添加动画效果。
如何使用?
使用非常简单,首先下载需要的css文件,你可以在下载地址上选择下载全部css,或者使用在线的Create custom build来生成自定义的css。
下载后将animate.css样式表引入你调用的HTML文件即可,如下:
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
当你引用以上CSS后,你可以在页面中添加相关class即可,如下:
<div id="demo" class="animated tada">Animate.css Demo</div>
添加class “animated tada"到id="demo"的元素。注意:这里tada是动画类型,你可以选择多达将近60种不同的css动画特效。
以上是静态页面中的使用,如果你需要动态的调用,你可以使用类似jQuery的类库来使用addClass()方法调用动画。
这里我们使用jQuery和animate.css开发一个简单的小游戏,你需要在指定的时间内将汽车挪出铁箱。代码如下:
........
来源:超棒的跨浏览器纯CSS动画实现 - Animate.css
分享到:
相关推荐
angular-animate.min.js(v1.4.6版本...AngularJS 提供了动画效果,可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 Demo参考:http://www.runoob.com/angularjs/angularjs-animations.html
angular-animate.min.js AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。
最新animate.css文件,解压后将里面的animate.css放入vscode即可
Vue.js的vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。 | Vue.js的DEMO Credit @h vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。...
在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 – Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果 Animate.css在线演示...
angular-animate.min.js(v1.6.4版本)AngularJS 动画AngularJS 提供了动画效果,可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 angular-animate.min.js(v1.6.4版本)AngularJS 动画...
前端项目-css3-animate-it,css3/jquery插件,用于在元素进入视图时对其进行动画处理
animate.css是一款功能非常强大的跨浏览器CSS3动画库。animate.css支持多达66种不同的CSS3动画效果,如:翻转、旋转、淡入淡出、滑动、放大缩小等等。最重要的是它几乎兼容所有的浏览器。
browser-deom1-excute-animate.gif
这是一款基于magnific-popup.js和animate.css的响应式lightbox特效。该特效使用magnific-popup.js作为驱动,使用animate.css作为动画特效,制作出各种打开lightbox的炫酷效果。
Animate.css是某位大牛写好的动画效果集合,需要的时候可以直接下载导入到项目中,在需要的元素上添加相关的类即可使用相对应的动画效果。
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
前端项目-just-animate,Web Animation library
当我们需要编写动画效果时,就需要引入第三方动画库,animate.css 和velocity.js是必要引入的!
一个css大神制作的成品的动画库,对控件动画有效,我做了测试和动画效果注释汉化。因为不是自己的东西,就不要分了,当然百度的静态资源库应该也是有的,不过对于初学者,注释还是很有必要的。截止2015年12月1号的...
animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入、左右摇摆动画等等。使用animate.css也非常简单,你可以给页面上的任意元素,特别是文字添加各种神奇的动画特效。
实现效果: 基于animate.css和原生JS实现的鼠标滚动动画效果,挺不错的CSS3动画效果,基于CSS动画插件 animate.css实现,animate.css拥有众多的动画特效而且是开源的,大家到官网看看吧。
animate css最新4.1.1文件打包下载 制作前端动画效果,GitHub搬运方便下载