经验分享程序开发文档资料数据资源其它资源

jQuery全屏动态滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏动态滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery全屏动态滚动特效代码

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content>
<meta name="keywords" content>
<meta name="author" content="Your Name">
<title>jQuery全屏动态滚动特效</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.scrollintro.css">
<link rel="stylesheet" href="css/animate.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.49511.js" type="text/javascript"></script>
<script src="js/jquery.scrollintro.min.js" type="text/javascript"></script>
<script>
		jQuery(document).ready(function($) {
			var _scroller = $('.wrapper').scrollIntro();
			$('#click2next').on('click', function(event) {
				_scroller.scrollTo($('.scroll-content').eq(1));
			});
		});
	</script>
</head>

<body>

<div class="wrapper">
	<div class="navigation">
		<ul>
			<li><a href="#content1"><span class="navSelect"></span></a></li>
			<li><a href="#content2"><span></span></a></li>
			<li><a href="#content3"><span></span></a></li>
			<li><a href="#content4"><span></span></a></li>
		</ul>
	</div>
	<div class="scroll-content" id="content1">
		<h3 class="animate-block">Click the image to next content</h3>
		<div class="content100-block animate-block">
			<img src="imgs/triworks_abstract31.jpg" class="animate-block full-image" id="click2next" />
			<p class="animate-block full-text">Lorem ipsum link to portfolio amet, 
			consectetur adipisicing elit. Sunt, iure, tempore saepe ab sed a doloribus 
			ipsam veritatis explicabo officia fugit eligendi dicta autem aperiam 
			facilis illum libero accusantium in.</p>
			<p class="animate-block full-text">Veritatis explicabo illum libero 
			accusantium in.</p>
		</div>
	</div>
	<div class="scroll-content" id="content2" data-easein="bounceInUp">
		<h3 class="animate-block">Say something important here</h3>
		<div class="animate-block content240-block">
			<img src="imgs/icons/finder.png" class="image240-block" />
			<p class="animate-block caption">
			<a href="http://codecanyon.net/user/sike">Link to my profile.</a> This 
			some little information here, you can put it under the image.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/foler.png" class="image240-block" />
			<p class="animate-block caption">Et quas consequatur architecto itaque 
			accusantium dolor quod obcaecati veritatis dolorem velit enim minima!</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/fonts.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nostrum, voluptas, alias, molestiae quos.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/game.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nobis, assumenda tenetur iusto ipsa illum incidun.</p>
		</div>
	</div>
	<div class="scroll-content" id="content3" data-easein="rollIn">
		<h3 class="animate-block">Say something important here</h3>
		<div class="animate-block content240-block">
			<img src="imgs/icons/homegroup.png" class="image240-block" />
			<p class="animate-block caption">
			<a href="http://codecanyon.net/user/sike">Link to my profile.</a> This 
			some little information here, you can put it under the image.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/control.png" class="image240-block" />
			<p class="animate-block caption">Et quas consequatur architecto itaque 
			accusantium dolor quod obcaecati veritatis dolorem velit enim minima!</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/gadgets.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nostrum, voluptas, alias, molestiae quos.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/connect.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nobis, assumenda tenetur iusto ipsa illum incidun.</p>
		</div>
	</div>
	<div class="scroll-content" id="content4">
		<h3 class="animate-block">Support circle thumbnail tooo</h3>
		<div class="content240-block animate-block">
			<img src="imgs/icons/signal.png" class="circle-image" />
			<h4 class="subtitle">Wifi</h4>
			<p class="animate-block caption">Lorem Pariatur iusto ex quo iusto sapiente 
			facere officiis. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/music.png" class="circle-image" />
			<h4 class="subtitle">Music</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/phone.png" class="circle-image" />
			<h4 class="subtitle">Phone</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. iusto sapiente facere officiis. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/clock.png" class="circle-image" />
			<h4 class="subtitle">Clock</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. iusto sapiente facere officiis. </p>
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.scrollintro.min.js):

!function(a){
	a.fn.scrollIntro=function(b){
	function g(b){
	b!=f&&a(c.animateBlock,f).each(function(){
	a(this)&&(Modernizr.csstransitions?a(this).removeClass(a(this).data("easein")).css("opacity",0):a(this).stop(!0,!0).animate({
	opacity:0}
,300))}
)}
function i(b){
	g(b);
	var d=b.data("easein")||c.easeIn;
	a(c.animateBlock,b).length,a(c.animateBlock,b).each(function(b){
	a(this)&&(Modernizr.csstransitions?(a(this).data("easein",d),a(this).addClass("animate"+b+" "+d)):a(this).delay(300*b).animate({
	opacity:1}
,300))}
),f=b}
function j(b){
	a("html,body").animate({
	x:0,scrollTop:b}
,{
	duration:600}
)}
function k(b){
	var d=b.attr("id");
	a(c.naviContainer+" a span").removeClass("navSelect"),a(c.naviContainer+" a[href="+"#"+d+"] span").addClass("navSelect"),i(b)}
function q(){
	if(window.innerHeight,clearTimeout(o),a(window).width()>=720){
	var c=Math.floor(a(window).scrollTop()/(600-p));
	0>c&&(c=0),c>=e.length-1&&(c=e.length-1),k(e[c])}
}
var c={
	naviContainer:".navigation",contentContainer:".scroll-content",animateBlock:".animate-block",easeIn:"fadeInDown"}
;
	b&&a.extend(c,b);
	var d=this;
	a(c.naviContainer).find("a").each(function(){
	a(this).on("click",function(b){
	b.preventDefault();
	var c=a(this).attr("href");
	f=a(c),"#"!=c?j(a(c).offset().top-70,800):j(0,800)}
)}
);
	var e=[];
	a(c.contentContainer).each(function(b){
	e[b]=a(this),0==b&&k(a(this))}
);
	var f;
	d.scrollTo=function(a){
	j(a.offset().top-70,800)}
,{
	h:window.innerHeight,w:window.innerWidth,ua:a.browser}
;
	var m;
	a(window).on("resize",function(){
	clearTimeout(m),a(window).width()<=720?(a(c.naviContainer).hide(),m=setTimeout(function(){
	a(c.animateBlock).each(function(){
	a(this).css("opacity",1).show()}
)}
,300)):(a(c.naviContainer).show(),m=setTimeout(function(){
	a(c.animateBlock).each(function(){
	a(this).css("opacity",0)}
),d.scrollTo(f)}
,300)),a(c.contentContainer).each(function(){
}
)}
),a(window).trigger("scroll"),a(window).trigger("resize"),a(window).on("scroll",q);
	var o,p=140;
	return this}
}
(jQuery);

JS代码(modernizr.custom.49511.js):

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-cssanimations-csstransitions-mq-teststyles-testprop-testallprops-domprefixes-load */
;
	window.Modernizr=function(a,b,c){
	function y(a){
	i.cssText=a}
function z(a,b){
	return y(prefixes.join(a+";
	")+(b||""))}
function A(a,b){
	return typeof a===b}
function B(a,b){
	return!!~(""+a).indexOf(b)}
function C(a,b){
	for(var d in a){
	var e=a[d];
	if(!B(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}
return!1}
function D(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}
return!1}
function E(a,b,c){
	var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+m.join(d+" ")+d).split(" ");
	return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+n.join(d+" ")+d).split(" "),D(e,b,c))}
var d="2.6.2",e={
}
,f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={
}
.toString,l="Webkit Moz O ms",m=l.split(" "),n=l.toLowerCase().split(" "),o={
}
,p={
}
,q={
}
,r=[],s=r.slice,t,u=function(a,c,d,e){
	var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");
	if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);
	return h=["&#173;
	",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i}
,v=function(b){
	var c=a.matchMedia||a.msMatchMedia;
	if(c)return c(b).matches;
	var d;
	return u("@media "+b+"{
	#"+g+"{
	position:absolute;
}
}
",function(b){
	d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}
),d}
,w={
}
.hasOwnProperty,x;
	!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){
	return w.call(a,b)}
:x=function(a,b){
	return b in a&&A(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
	var c=this;
	if(typeof c!="function")throw new TypeError;
	var d=s.call(arguments,1),e=function(){
	if(this instanceof e){
	var a=function(){
}
;
	a.prototype=c.prototype;
	var f=new a,g=c.apply(f,d.concat(s.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(s.call(arguments)))}
;
	return e}
),o.cssanimations=function(){
	return E("animationName")}
,o.csstransitions=function(){
	return E("transition")}
;
	for(var F in o)x(o,F)&&(t=F.toLowerCase(),e[t]=o[F](),r.push((e[t]?"":"no-")+t));
	return e.addTest=function(a,b){
	if(typeof a=="object")for(var d in a)x(a,d)&&e.addTest(d,a[d]);
	else{
	a=a.toLowerCase();
	if(e[a]!==c)return e;
	b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,y(""),h=j=null,e._version=d,e._domPrefixes=n,e._cssomPrefixes=m,e.mq=v,e.testProp=function(a){
	return C([a])}
,e.testAllProps=E,e.testStyles=u,e}
(this,this.document),function(a,b,c){
	function d(a){
	return"[object Function]"==o.call(a)}
function e(a){
	return"string"==typeof a}
function f(){
}
function g(a){
	return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h(){
	var a=p.shift();
	q=1,a?a.t?m(function(){
	("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
	function k(b){
	if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
	"img"!=a&&m(function(){
	t.removeChild(l)}
,50);
	for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={
	t:d,s:c,e:f,a:i,x:j}
;
	1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
	k.call(this,r)}
,p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
	return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}
function k(){
	var a=B;
	return a.loader={
	load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
	return"[object Array]"==o.call(a)}
,x=[],y={
}
,z={
	timeout:function(a,b){
	return b.length&&(a.timeout=b[0]),a}
}
,A,B;
	B=function(a){
	function b(a){
	var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
	url:c,origUrl:c,prefixes:a}
,e,f,g;
	for(f=0;
	f<d;
	f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
	for(f=0;
	f<b;
	f++)c=x[f](c);
	return c}
function g(a,e,f,g,h){
	var i=b(a),j=i.autoCallback;
	i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){
	k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2}
)))}
function h(a,b){
	function c(a,c){
	if(a){
	if(e(a))c||(j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
),g(a,j,b,0,h);
	else if(Object(a)===a)for(n in m=function(){
	var b=0,c;
	for(c in a)a.hasOwnProperty(c)&&b++;
	return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
:j[n]=function(a){
	return function(){
	var b=[].slice.call(arguments);
	a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
	c(h?a.yep:a.nope,!!i),i&&c(i)}
var i,j,l=this.yepnope.loader;
	if(e(a))g(a,0,l,0);
	else if(w(a))for(i=0;
	i<a.length;
	i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);
	else Object(a)===a&&h(a,l)}
,B.addPrefix=function(a,b){
	z[a]=b}
,B.addFilter=function(a){
	x.push(a)}
,B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
	b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
	var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
	k.src=a;
	for(o in d)k.setAttribute(o,d[o]);
	c=j?h:c||f,k.onreadystatechange=k.onload=function(){
	!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
	l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
	var e=b.createElement("link"),j,c=i?h:c||f;
	e.href=a,e.rel="stylesheet",e.type="text/css";
	for(j in d)e.setAttribute(j,d[j]);
	g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
	yepnope.apply(window,[].slice.call(arguments,0))}
;

CSS代码(animate.css):

@charset "UTF-8";/*Animate.css - http://daneden.me/animateLicensed under the MIT licenseCopyright (c) 2013 Daniel EdenPermission is hereby granted,free of charge,to any person obtaining a copy of this software and associated documentation files (the "Software"),to deal in the Software without restriction,including without limitation the rights to use,copy,modify,merge,publish,distribute,sublicense,and/or sell copies of the Software,and to permit persons to whom the Software is furnished to do so,subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
body{/* Addresses a small issue in webkit:http://bit.ly/NEdoDq */
-webkit-backface-visibility:hidden;}
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
@-webkit-keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-moz-keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-o-keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash;}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-o-keyframes shake{0%,100%{-o-transform:translateX(0);}
10%,30%,50%,70%,90%{-o-transform:translateX(-10px);}
20%,40%,60%,80%{-o-transform:translateX(10px);}
}
@keyframes shake{0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake;}
@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}
}
@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0);}
40%{-o-transform:translateY(-30px);}
60%{-o-transform:translateY(-15px);}
}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce;}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-o-keyframes tada{0%{-o-transform:scale(1);}
10%,20%{-o-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
100%{-o-transform:scale(1) rotate(0);}
}
@keyframes tada{0%{transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);}
}
.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada;}
@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}
20%{-webkit-transform:rotate(15deg);}
40%{-webkit-transform:rotate(-10deg);}
60%{-webkit-transform:rotate(5deg);}
80%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(0deg);}
}
@-moz-keyframes swing{20%{-moz-transform:rotate(15deg);}
40%{-moz-transform:rotate(-10deg);}
60%{-moz-transform:rotate(5deg);}
80%{-moz-transform:rotate(-5deg);}
100%{-moz-transform:rotate(0deg);}
}
@-o-keyframes swing{20%{-o-transform:rotate(15deg);}
40%{-o-transform:rotate(-10deg);}
60%{-o-transform:rotate(5deg);}
80%{-o-transform:rotate(-5deg);}
100%{-o-transform:rotate(0deg);}
}
@keyframes swing{20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing;}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);}
15%{-webkit-transform:translateX(-25%) rotate(-5deg);}
30%{-webkit-transform:translateX(20%) rotate(3deg);}
45%{-webkit-transform:translateX(-15%) rotate(-3deg);}
60%{-webkit-transform:translateX(10%) rotate(2deg);}
75%{-webkit-transform:translateX(-5%) rotate(-1deg);}
100%{-webkit-transform:translateX(0%);}
}
@-moz-keyframes wobble{0%{-moz-transform:translateX(0%);}
15%{-moz-transform:translateX(-25%) rotate(-5deg);}
30%{-moz-transform:translateX(20%) rotate(3deg);}
45%{-moz-transform:translateX(-15%) rotate(-3deg);}
60%{-moz-transform:translateX(10%) rotate(2deg);}
75%{-moz-transform:translateX(-5%) rotate(-1deg);}
100%{-moz-transform:translateX(0%);}
}
@-o-keyframes wobble{0%{-o-transform:translateX(0%);}
15%{-o-transform:translateX(-25%) rotate(-5deg);}
30%{-o-transform:translateX(20%) rotate(3deg);}
45%{-o-transform:translateX(-15%) rotate(-3deg);}
60%{-o-transform:translateX(10%) rotate(2deg);}
75%{-o-transform:translateX(-5%) rotate(-1deg);}
100%{-o-transform:translateX(0%);}
}
@keyframes wobble{0%{transform:translateX(0%);}
15%{transform:translateX(-25%) rotate(-5deg);}
30%{transform:translateX(20%) rotate(3deg);}
45%{transform:translateX(-15%) rotate(-3deg);}
60%{transform:translateX(10%) rotate(2deg);}
75%{transform:translateX(-5%) rotate(-1deg);}
100%{transform:translateX(0%);}
}
.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble;}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(1.1);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes pulse{0%{-moz-transform:scale(1);}
50%{-moz-transform:scale(1.1);}
100%{-moz-transform:scale(1);}
}
@-o-keyframes pulse{0%{-o-transform:scale(1);}
50%{-o-transform:scale(1.1);}
100%{-o-transform:scale(1);}
}
@keyframes pulse{0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}
.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse;}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in;}
100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-o-keyframes flip{0%{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out;}
40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out;}
50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in;}
80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in;}
100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in;}
}
@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
.flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip;}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-o-transform:perspective(400px) rotateX(-10deg);}
70%{-o-transform:perspective(400px) rotateX(10deg);}
100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0deg);opacity:1;}
}
.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;}
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
70%{-webkit-transform:perspective(400px) rotateY(10deg);}
100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateY(-10deg);}
70%{-moz-transform:perspective(400px) rotateY(10deg);}
100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-o-transform:perspective(400px) rotateY(-10deg);}
70%{-o-transform:perspective(400px) rotateY(10deg);}
100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{transform:perspective(400px) rotateY(0deg);opacity:1;}
}
.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;}
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}
.flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY;}
@-webkit-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}
100%{opacity:1;transform:translateY(0);}
}
.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0);}
}
.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}
100%{opacity:1;transform:translateX(0);}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}
100%{opacity:1;transform:translateX(0);}
}
.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}
100%{opacity:1;transform:translateY(0);}
}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig;}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);}
100%{opacity:1;transform:translateY(0);}
}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig;}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);}
100%{opacity:1;transform:translateX(0);}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);}
100%{opacity:1;transform:translateX(0);}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;}
@-webkit-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut;}
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-20px);}
}
@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(-20px);}
}
@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0);}
100%{opacity:0;-o-transform:translateY(-20px);}
}
@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-20px);}
}
.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp;}
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(20px);}
}
@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(20px);}
}
@-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0);}
100%{opacity:0;-o-transform:translateY(20px);}
}
@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(20px);}
}
.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown;}
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-20px);}
}
@-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(-20px);}
}
@-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0);}
100%{opacity:0;-o-transform:translateX(-20px);}
}
@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-20px);}
}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;}
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(20px);}
}
@-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(20px);}
}
@-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0);}
100%{opacity:0;-o-transform:translateX(20px);}
}
@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(20px);}
}
.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight;}
@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-2000px);}
}
@-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(-2000px);}
}
@-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0);}
100%{opacity:0;-o-transform:translateY(-2000px);}
}
@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-2000px);}
}
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig;}
@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(2000px);}
}
@-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(2000px);}
}
@-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0);}
100%{opacity:0;-o-transform:translateY(2000px);}
}
@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(2000px);}
}
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig;}
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-2000px);}
}
@-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(-2000px);}
}
@-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0);}
100%{opacity:0;-o-transform:translateX(-2000px);}
}
@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-2000px);}
}
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig;}
@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(2000px);}
}
@-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(2000px);}
}
@-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0);}
100%{opacity:0;-o-transform:translateX(2000px);}
}
@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(2000px);}
}
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig;}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}
50%{-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(.9);}
100%{-webkit-transform:scale(1);opacity:1;}
}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3);}
50%{-moz-transform:scale(1.05);}
70%{-moz-transform:scale(.9);}
100%{-moz-transform:scale(1);opacity:1;}
}
@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3);}
50%{-o-transform:scale(1.05);}
70%{-o-transform:scale(.9);}
100%{-o-transform:scale(1);opacity:1;}
}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}
50%{transform:scale(1.05);}
70%{transform:scale(.9);}
100%{transform:scale(1);opacity:1;}
}
.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}
60%{-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px);}
60%{-moz-transform:translateY(-30px);}
80%{-moz-transform:translateY(10px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px);}
60%{-o-transform:translateY(-30px);}
80%{-o-transform:translateY(10px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{opacity:1;transform:translateY(0);}
}
.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp;}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}
60%{-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}
60%{-moz-transform:translateY(30px);}
80%{-moz-transform:translateY(-10px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px);}
60%{-o-transform:translateY(30px);}
80%{-o-transform:translateY(-10px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{opacity:1;transform:translateY(0);}
}
.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;}
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}
60%{-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}
60%{-moz-transform:translateX(30px);}
80%{-moz-transform:translateX(-10px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}
60%{-o-transform:translateX(30px);}
80%{-o-transform:translateX(-10px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{opacity:1;transform:translateX(0);}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft;}
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}
60%{-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px);}
60%{-moz-transform:translateX(-30px);}
80%{-moz-transform:translateX(10px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px);}
60%{-o-transform:translateX(-30px);}
80%{-o-transform:translateX(10px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{opacity:1;transform:translateX(0);}
}
.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight;}
@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);}
25%{-webkit-transform:scale(.95);}
50%{opacity:1;-webkit-transform:scale(1.1);}
100%{opacity:0;-webkit-transform:scale(.3);}
}
@-moz-keyframes bounceOut{0%{-moz-transform:scale(1);}
25%{-moz-transform:scale(.95);}
50%{opacity:1;-moz-transform:scale(1.1);}
100%{opacity:0;-moz-transform:scale(.3);}
}
@-o-keyframes bounceOut{0%{-o-transform:scale(1);}
25%{-o-transform:scale(.95);}
50%{opacity:1;-o-transform:scale(1.1);}
100%{opacity:0;-o-transform:scale(.3);}
}
@keyframes bounceOut{0%{transform:scale(1);}
25%{transform:scale(.95);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0;transform:scale(.3);}
}
.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut;}
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(20px);}
100%{opacity:0;-webkit-transform:translateY(-2000px);}
}
@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(20px);}
100%{opacity:0;-moz-transform:translateY(-2000px);}
}
@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0);}
20%{opacity:1;-o-transform:translateY(20px);}
100%{opacity:0;-o-transform:translateY(-2000px);}
}
@keyframes bounceOutUp{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-2000px);}
}
.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp;}
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(-20px);}
100%{opacity:0;-webkit-transform:translateY(2000px);}
}
@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(-20px);}
100%{opacity:0;-moz-transform:translateY(2000px);}
}
@-o-keyframes bounceOutDown{0%{-o-transform:translateY(0);}
20%{opacity:1;-o-transform:translateY(-20px);}
100%{opacity:0;-o-transform:translateY(2000px);}
}
@keyframes bounceOutDown{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(2000px);}
}
.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown;}
@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(20px);}
100%{opacity:0;-webkit-transform:translateX(-2000px);}
}
@-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(20px);}
100%{opacity:0;-moz-transform:translateX(-2000px);}
}
@-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0);}
20%{opacity:1;-o-transform:translateX(20px);}
100%{opacity:0;-o-transform:translateX(-2000px);}
}
@keyframes bounceOutLeft{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-2000px);}
}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft;}
@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(-20px);}
100%{opacity:0;-webkit-transform:translateX(2000px);}
}
@-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(-20px);}
100%{opacity:0;-moz-transform:translateX(2000px);}
}
@-o-keyframes bounceOutRight{0%{-o-transform:translateX(0);}
20%{opacity:1;-o-transform:translateX(-20px);}
100%{opacity:0;-o-transform:translateX(2000px);}
}
@keyframes bounceOutRight{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(2000px);}
}
.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight;}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0;}
100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
}
@-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0;}
100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}
}
@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0;}
100%{transform-origin:center center;transform:rotate(0);opacity:1;}
}
.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn;}
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}
100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}
}
@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;}
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}
100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}
}
@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;}
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}
100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}
}
@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight;}
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}
100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}
}
@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight;}
@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
}
@-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
}
@-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}
100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0;}
}
@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut;}
@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}
100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;}
@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}
100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;}
@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}
100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;}
@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}
100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;}
@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
100%{-webkit-transform:translateY(700px);opacity:0;}
}
@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}
20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}
40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}
80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}
100%{-moz-transform:translateY(700px);opacity:0;}
}
@-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}
20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}
40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}
80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}
100%{-o-transform:translateY(700px);opacity:0;}
}
@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out;}
20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out;}
40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;}
80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out;}
100%{transform:translateY(700px);opacity:0;}
}
.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge;}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}
}
@-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}
}
@-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}
}
@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;transform:translateX(0px) rotate(0deg);}
}
.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn;}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}
100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);}
}
@-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}
100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg);}
}
@-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}
100%{opacity:0;-o-transform:translateX(100%) rotate(120deg);}
}
@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}
100%{opacity:0;transform:translateX(100%) rotate(120deg);}
}
.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut;}
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-moz-keyframes lightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-moz-transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-o-keyframes lightSpeedIn{0%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-o-transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{transform:translateX(0%) skewX(0deg);opacity:1;}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out;}
.animated.lightSpeedIn{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;}
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@-moz-keyframes lightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@-o-keyframes lightSpeedOut{0%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1;}
100%{transform:translateX(100%) skewX(-30deg);opacity:0;}
}
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}
.animated.lightSpeedOut{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s;}
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg);}
10%{-webkit-transform:skewX(-8deg);}
20%{-webkit-transform:skewX(7deg);}
30%{-webkit-transform:skewX(-6deg);}
40%{-webkit-transform:skewX(5deg);}
50%{-webkit-transform:skewX(-4deg);}
60%{-webkit-transform:skewX(3deg);}
70%{-webkit-transform:skewX(-2deg);}
80%{-webkit-transform:skewX(1deg);}
90%{-webkit-transform:skewX(0deg);}
100%{-webkit-transform:skewX(0deg);}
}
@-moz-keyframes wiggle{0%{-moz-transform:skewX(9deg);}
10%{-moz-transform:skewX(-8deg);}
20%{-moz-transform:skewX(7deg);}
30%{-moz-transform:skewX(-6deg);}
40%{-moz-transform:skewX(5deg);}
50%{-moz-transform:skewX(-4deg);}
60%{-moz-transform:skewX(3deg);}
70%{-moz-transform:skewX(-2deg);}
80%{-moz-transform:skewX(1deg);}
90%{-moz-transform:skewX(0deg);}
100%{-moz-transform:skewX(0deg);}
}
@-o-keyframes wiggle{0%{-o-transform:skewX(9deg);}
10%{-o-transform:skewX(-8deg);}
20%{-o-transform:skewX(7deg);}
30%{-o-transform:skewX(-6deg);}
40%{-o-transform:skewX(5deg);}
50%{-o-transform:skewX(-4deg);}
60%{-o-transform:skewX(3deg);}
70%{-o-transform:skewX(-2deg);}
80%{-o-transform:skewX(1deg);}
90%{-o-transform:skewX(0deg);}
100%{-o-transform:skewX(0deg);}
}
@keyframes wiggle{0%{transform:skewX(9deg);}
10%{transform:skewX(-8deg);}
20%{transform:skewX(7deg);}
30%{transform:skewX(-6deg);}
40%{transform:skewX(5deg);}
50%{transform:skewX(-4deg);}
60%{transform:skewX(3deg);}
70%{transform:skewX(-2deg);}
80%{transform:skewX(1deg);}
90%{transform:skewX(0deg);}
100%{transform:skewX(0deg);}
}
.wiggle{-webkit-animation-name:wiggle;-moz-animation-name:wiggle;-o-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}
.animated.wiggle{-webkit-animation-duration:0.75s;-moz-animation-duration:0.75s;-o-animation-duration:0.75s;animation-duration:0.75s;}

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
226.88 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
226.88 KB
立即下载
石琼羽
了解
打赏作者 鼓励作者
Html 动画效果1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章