html+fadein动画,使用Animate.css制作超炫的CSS3动画

如何使用

首先引入animate css文件。

然后给指定的元素加上指定的动画class样式名。

这里包括两个class名，第一个是基本的，也是必须添加的样式名，任何想实现的元素都得添加这个样式。第二个是指定的动画样式名，也就是想要什么动画效果，指定对应的动画样式名称就可以。如果想让动画循环则可以加入样式：infinite 。

Animate.css提供了以下多种动画效果可以直接作为class样式添加使用，就像文章：jQuery Easing 动画效果扩展提到的easing动画一样。

bounce

，flash

，pulse

，rubberBand

，shake

，swing

，tada

，wobble

，jello

，bounceIn

，bounceInDown

，bounceInLeft

，bounceInRight

，bounceInUp

，bounceOut

，bounceOutDown

，bounceOutLeft

，bounceOutRight

，bounceOutUp

，fadeIn

，fadeInDown

，fadeInDownBig

，fadeInLeft

，fadeInLeftBig

，fadeInRight

，fadeInRightBig

，fadeInUp

，fadeInUpBig

，fadeOut

，fadeOutDown

，fadeOutDownBig

，fadeOutLeft

，fadeOutLeftBig

，fadeOutRight

，fadeOutRightBig

，fadeOutUp

，fadeOutUpBig

，flipInX

，flipInY

，flipOutX

，flipOutY

，lightSpeedIn

，lightSpeedOut

，rotateIn

，rotateInDownLeft

，rotateInDownRight

，rotateInUpLeft

，rotateInUpRight

，rotateOut

，rotateOutDownLeft

，rotateOutDownRight

，rotateOutUpLeft

，rotateOutUpRight

，hinge

，rollIn

，rollOut

，zoomIn

，zoomInDown

，zoomInLeft

，zoomInRight

，zoomInUp

，zoomOut

，zoomOutDown

，zoomOutLeft

，zoomOutRight

，zoomOutUp

，slideInDown

，slideInLeft

，slideInRight

，slideInUp

，slideOutDown

，slideOutLeft

，slideOutRight

，slideOutUp

如果说想给某个元素动态添加动画样式，可以结合jquery来实现：

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

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

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

html+fadein动画,使用Animate.css制作超炫的CSS3动画相关推荐

超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
CSS3动画效果-animate.css
为什么80%的码农都做不了架构师?>>> animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体 ...
animate css组合,Vue---CSS动画之animate.css库
animation完成一个动画效果代码基本结构搭建使用与过渡动画相同的代码结构 hello world change var vm = new Vue({ el:'#root', data:{ s ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
Canvas 示例：4种超炫的网站动画背景效果
今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间.最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用 JavaSc ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

html+fadein动画,使用Animate.css制作超炫的CSS3动画

html+fadein动画,使用Animate.css制作超炫的CSS3动画相关推荐

最新文章

热门文章