以下是 HTML5手机端相册触屏滑动切换滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<title>HTML5手机端相册触屏滑动切换特效</title>
<link rel="stylesheet" href="css/animate.min.css">
<script type="text/javascript" src="js/zepto.min.js"></script>
<style type="text/css">
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;}
body{ background-color: #000;}
ul{ list-style-type: none;}
ul li{ float: left; overflow: hidden;}
.big-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: #000;}
</style>
</head>
<body>
<ul id="img-lt"></ul>
<div class="big-img animated fadeInDown" id="bigImg">
<img id="lar-img"/>
</div>
<script type="text/javascript">
var num = 12;
var zWin = $(window);
var render = function(){
var tmpl = '';
var padding = 2;
var width = $(window).width();
var height = $(window).height();
var liWidth = Math.floor((width-padding*3)/4);
for (var i = 1; i <= num; i++) {
var p = padding;
var imgSrc = 'imgs/'+ i + '.jpg';
if (i%4==1) {
p=0;
};
tmpl+='<li class="animated bounceIn" data-id="'+ i +'" style="width:'+ liWidth +'px; height:'+ liWidth +'px; padding-left:'+ p +'px; padding-top:'+ padding +'px;"><img src="'+ imgSrc +'"></li>';
};
$("#img-lt").html(tmpl);
}
render();
var pid;
var wImg = $("#lar-img");
var domImage = wImg[0];
var loadImg = function(id,callback){
$("#img-lt").css({
height: zWin.height(),
'overflow': 'hidden'
});
$("#bigImg").css({
width: zWin.width(),
height: zWin.height()
}).show();
var imgsrc = 'imgs/'+ id + '.jpg';
var ImageObj = new Image();
ImageObj.src = imgsrc;
ImageObj.onload = function(){
var w = this.width;
var h = this.height;
var winW = zWin.width();
var winH = zWin.height();
var pw = parseInt((winW - winH*(w/h))/2);
var ph = parseInt((winH - winW*(h/w))/2);
wImg.css({
'width': 'auto',
'height': 'auto'
});
wImg.css({
'padding-left': '0px',
'padding-top': '0px'
});
if (h/w>1.2) {
wImg.attr('src',imgsrc).css({ 'height': winH, 'padding-left': pw + 'px'});
}
else{
wImg.attr('src',imgsrc).css({'width': winW, 'padding-top': ph + 'px' });
}
callback&&callback();
}
}
$("#img-lt").delegate('li', 'tap', function() {
var id = pid = $(this).attr('data-id');
loadImg(id);
});
$("#bigImg").tap(function(){
$(this).hide();
$("#img-lt").css({
height: 'auto',
'overflow': 'auto'
});
})
$('#bigImg').mousedown(function(e){
e.preventDefault();
});
var lock = false;
$('#bigImg').swipeLeft(function(){
if(lock){
return;
}
pid++;
lock =true;
loadImg(pid,function(){
domImage.addEventListener('webkitAnimationEnd',function(){
wImg.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
lock = false;
},false);
wImg.addClass('animated bounceInRight');
});
});
$("#bigImg").swipeRight(function(){
if (lock) {
return;
};
pid--;
lock = true;
loadImg(pid,function(){
domImage.addEventListener('webkitAnimationEnd',function(){
wImg.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
lock = false;
},false);
wImg.addClass('animated bounceInRight');
});
})
</script>
</body>
</html>
JS代码(zepto.min.js):
/* Zepto v1.0rc1 - polyfill zepto event detect fx ajax form touch - zeptojs.com/license */
(function(a){
String.prototype.trim===a&&(String.prototype.trim=function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"")}
),Array.prototype.reduce===a&&(Array.prototype.reduce=function(b){
if(this===void 0||this===null)throw new TypeError;
var c=Object(this),d=c.length>>>0,e=0,f;
if(typeof b!="function")throw new TypeError;
if(d==0&&arguments.length==1)throw new TypeError;
if(arguments.length>=2)f=arguments[1];
else do{
if(e in c){
f=c[e++];
break}
if(++e>=d)throw new TypeError}
while(!0);
while(e<d)e in c&&(f=b.call(a,f,c[e],e,c)),e++;
return f}
)}
)();
var Zepto=function(){
function A(a){
return v.call(a)=="[object Function]"}
function B(a){
return a instanceof Object}
function C(b){
var c,d;
if(v.call(b)!=="[object Object]")return!1;
d=A(b.constructor)&&b.constructor.prototype;
if(!d||!hasOwnProperty.call(d,"isPrototypeOf"))return!1;
for(c in b);
return c===a||hasOwnProperty.call(b,c)}
function D(a){
return a instanceof Array}
function E(a){
return typeof a.length=="number"}
function F(b){
return b.filter(function(b){
return b!==a&&b!==null}
)}
function G(a){
return a.length>0?[].concat.apply([],a):a}
function H(a){
return a.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}
function I(a){
return a in i?i[a]:i[a]=new RegExp("(^|\\s)"+a+"(\\s|$)")}
function J(a,b){
return typeof b=="number"&&!k[H(a)]?b+"px":b}
function K(a){
var b,c;
return h[a]||(b=g.createElement(a),g.body.appendChild(b),c=j(b,"").getPropertyValue("display"),b.parentNode.removeChild(b),c=="none"&&(c="block"),h[a]=c),h[a]}
function L(b,d){
return d===a?c(b):c(b).filter(d)}
function M(a,b,c,d){
return A(b)?b.call(a,c,d):b}
function N(a,b,d){
var e=a%2?b:b.parentNode;
e?e.insertBefore(d,a?a==1?e.firstChild:a==2?b:null:b.nextSibling):c(d).remove()}
function O(a,b){
b(a);
for(var c in a.childNodes)O(a.childNodes[c],b)}
var a,b,c,d,e=[],f=e.slice,g=window.document,h={
}
,i={
}
,j=g.defaultView.getComputedStyle,k={
"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1}
,l=/^\s*<(\w+|!)[^>]*>/,m=[1,3,8,9,11],n=["after","prepend","before","append"],o=g.createElement("table"),p=g.createElement("tr"),q={
tr:g.createElement("tbody"),tbody:o,thead:o,tfoot:o,td:p,th:p,"*":g.createElement("div")}
,r=/complete|loaded|interactive/,s=/^\.([\w-]+)$/,t=/^#([\w-]+)$/,u=/^[\w-]+$/,v={
}
.toString,w={
}
,x,y,z=g.createElement("div");
return w.matches=function(a,b){
if(!a||a.nodeType!==1)return!1;
var c=a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.matchesSelector;
if(c)return c.call(a,b);
var d,e=a.parentNode,f=!e;
return f&&(e=z).appendChild(a),d=~w.qsa(e,b).indexOf(a),f&&z.removeChild(a),d}
,x=function(a){
return a.replace(/-+(.)?/g,function(a,b){
return b?b.toUpperCase():""}
)}
,y=function(a){
return a.filter(function(b,c){
return a.indexOf(b)==c}
)}
,w.fragment=function(b,d){
d===a&&(d=l.test(b)&&RegExp.$1),d in q||(d="*");
var e=q[d];
return e.innerHTML=""+b,c.each(f.call(e.childNodes),function(){
e.removeChild(this)}
)}
,w.Z=function(a,b){
return a=a||[],a.__proto__=arguments.callee.prototype,a.selector=b||"",a}
,w.isZ=function(a){
return a instanceof w.Z}
,w.init=function(b,d){
if(!b)return w.Z();
if(A(b))return c(g).ready(b);
if(w.isZ(b))return b;
var e;
if(D(b))e=F(b);
else if(C(b))e=[c.extend({
}
,b)],b=null;
else if(m.indexOf(b.nodeType)>=0||b===window)e=[b],b=null;
else if(l.test(b))e=w.fragment(b.trim(),RegExp.$1),b=null;
else{
if(d!==a)return c(d).find(b);
e=w.qsa(g,b)}
return w.Z(e,b)}
,c=function(a,b){
return w.init(a,b)}
,c.extend=function(c){
return f.call(arguments,1).forEach(function(d){
for(b in d)d[b]!==a&&(c[b]=d[b])}
),c}
,w.qsa=function(a,b){
var c;
return a===g&&t.test(b)?(c=a.getElementById(RegExp.$1))?[c]:e:a.nodeType!==1&&a.nodeType!==9?e:f.call(s.test(b)?a.getElementsByClassName(RegExp.$1):u.test(b)?a.getElementsByTagName(b):a.querySelectorAll(b))}
,c.isFunction=A,c.isObject=B,c.isArray=D,c.isPlainObject=C,c.inArray=function(a,b,c){
return e.indexOf.call(b,a,c)}
,c.trim=function(a){
return a.trim()}
,c.uuid=0,c.map=function(a,b){
var c,d=[],e,f;
if(E(a))for(e=0;
e<a.length;
e++)c=b(a[e],e),c!=null&&d.push(c);
else for(f in a)c=b(a[f],f),c!=null&&d.push(c);
return G(d)}
,c.each=function(a,b){
var c,d;
if(E(a)){
for(c=0;
c<a.length;
c++)if(b.call(a[c],c,a[c])===!1)return a}
else for(d in a)if(b.call(a[d],d,a[d])===!1)return a;
return a}
,c.fn={
forEach:e.forEach,reduce:e.reduce,push:e.push,indexOf:e.indexOf,concat:e.concat,map:function(a){
return c.map(this,function(b,c){
return a.call(b,c,b)}
)}
,slice:function(){
return c(f.apply(this,arguments))}
,ready:function(a){
return r.test(g.readyState)?a(c):g.addEventListener("DOMContentLoaded",function(){
a(c)}
,!1),this}
,get:function(b){
return b===a?f.call(this):this[b]}
,toArray:function(){
return this.get()}
,size:function(){
return this.length}
,remove:function(){
return this.each(function(){
this.parentNode!=null&&this.parentNode.removeChild(this)}
)}
,each:function(a){
return this.forEach(function(b,c){
a.call(b,c,b)}
),this}
,filter:function(a){
return c([].filter.call(this,function(b){
return w.matches(b,a)}
))}
,add:function(a,b){
return c(y(this.concat(c(a,b))))}
,is:function(a){
return this.length>0&&w.matches(this[0],a)}
,not:function(b){
var d=[];
if(A(b)&&b.call!==a)this.each(function(a){
b.call(this,a)||d.push(this)}
);
else{
var e=typeof b=="string"?this.filter(b):E(b)&&A(b.item)?f.call(b):c(b);
this.forEach(function(a){
e.indexOf(a)<0&&d.push(a)}
)}
return c(d)}
,eq:function(a){
return a===-1?this.slice(a):this.slice(a,+a+1)}
,first:function(){
var a=this[0];
return a&&!B(a)?a:c(a)}
,last:function(){
var a=this[this.length-1];
return a&&!B(a)?a:c(a)}
,find:function(a){
var b;
return this.length==1?b=w.qsa(this[0],a):b=this.map(function(){
return w.qsa(this,a)}
),c(b)}
,closest:function(a,b){
var d=this[0];
while(d&&!w.matches(d,a))d=d!==b&&d!==g&&d.parentNode;
return c(d)}
,parents:function(a){
var b=[],d=this;
while(d.length>0)d=c.map(d,function(a){
if((a=a.parentNode)&&a!==g&&b.indexOf(a)<0)return b.push(a),a}
);
return L(b,a)}
,parent:function(a){
return L(y(this.pluck("parentNode")),a)}
,children:function(a){
return L(this.map(function(){
return f.call(this.children)}
),a)}
,siblings:function(a){
return L(this.map(function(a,b){
return f.call(b.parentNode.children).filter(function(a){
return a!==b}
)}
),a)}
,empty:function(){
return this.each(function(){
this.innerHTML=""}
)}
,pluck:function(a){
return this.map(function(){
return this[a]}
)}
,show:function(){
return this.each(function(){
this.style.display=="none"&&(this.style.display=null),j(this,"").getPropertyValue("display")=="none"&&(this.style.display=K(this.nodeName))}
)}
,replaceWith:function(a){
return this.before(a).remove()}
,wrap:function(a){
return this.each(function(){
c(this).wrapAll(c(a)[0].cloneNode(!1))}
)}
,wrapAll:function(a){
return this[0]&&(c(this[0]).before(a=c(a)),a.append(this)),this}
,unwrap:function(){
return this.parent().each(function(){
c(this).replaceWith(c(this).children())}
),this}
,clone:function(){
return c(this.map(function(){
return this.cloneNode(!0)}
))}
,hide:function(){
return this.css("display","none")}
,toggle:function(b){
return(b===a?this.css("display")=="none":b)?this.show():this.hide()}
,prev:function(){
return c(this.pluck("previousElementSibling"))}
,next:function(){
return c(this.pluck("nextElementSibling"))}
,html:function(b){
return b===a?this.length>0?this[0].innerHTML:null:this.each(function(a){
var d=this.innerHTML;
c(this).empty().append(M(this,b,a,d))}
)}
,text:function(b){
return b===a?this.length>0?this[0].textContent:null:this.each(function(){
this.textContent=b}
)}
,attr:function(c,d){
var e;
return typeof c=="string"&&d===a?this.length==0||this[0].nodeType!==1?a:c=="value"&&this[0].nodeName=="INPUT"?this.val():!(e=this[0].getAttribute(c))&&c in this[0]?this[0][c]:e:this.each(function(a){
if(this.nodeType!==1)return;
if(B(c))for(b in c)this.setAttribute(b,c[b]);
else this.setAttribute(c,M(this,d,a,this.getAttribute(c)))}
)}
,removeAttr:function(a){
return this.each(function(){
this.nodeType===1&&this.removeAttribute(a)}
)}
,prop:function(b,c){
return c===a?this[0]?this[0][b]:a:this.each(function(a){
this[b]=M(this,c,a,this[b])}
)}
,data:function(b,c){
var d=this.attr("data-"+H(b),c);
return d!==null?d:a}
,val:function(b){
return b===a?this.length>0?this[0].value:a:this.each(function(a){
this.value=M(this,b,a,this.value)}
)}
,offset:function(){
if(this.length==0)return null;
var a=this[0].getBoundingClientRect();
return{
left:a.left+window.pageXOffset,top:a.top+window.pageYOffset,width:a.width,height:a.height}
}
,css:function(c,d){
if(d===a&&typeof c=="string")return this.length==0?a:this[0].style[x(c)]||j(this[0],"").getPropertyValue(c);
var e="";
for(b in c)typeof c[b]=="string"&&c[b]==""?this.each(function(){
this.style.removeProperty(H(b))}
):e+=H(b)+":"+J(b,c[b])+";
";
return typeof c=="string"&&(d==""?this.each(function(){
this.style.removeProperty(H(c))}
):e=H(c)+":"+J(c,d)),this.each(function(){
this.style.cssText+=";
"+e}
)}
,index:function(a){
return a?this.indexOf(c(a)[0]):this.parent().children().indexOf(this[0])}
,hasClass:function(a){
return this.length<1?!1:I(a).test(this[0].className)}
,addClass:function(a){
return this.each(function(b){
d=[];
var e=this.className,f=M(this,a,b,e);
f.split(/\s+/g).forEach(function(a){
c(this).hasClass(a)||d.push(a)}
,this),d.length&&(this.className+=(e?" ":"")+d.join(" "))}
)}
,removeClass:function(b){
return this.each(function(c){
if(b===a)return this.className="";
d=this.className,M(this,b,c,d).split(/\s+/g).forEach(function(a){
d=d.replace(I(a)," ")}
),this.className=d.trim()}
)}
,toggleClass:function(b,d){
return this.each(function(e){
var f=M(this,b,e,this.className);
(d===a?!c(this).hasClass(f):d)?c(this).addClass(f):c(this).removeClass(f)}
)}
}
,["width","height"].forEach(function(b){
c.fn[b]=function(d){
var e,f=b.replace(/./,function(a){
return a[0].toUpperCase()}
);
return d===a?this[0]==window?window["inner"+f]:this[0]==g?g.documentElement["offset"+f]:(e=this.offset())&&e[b]:this.each(function(a){
var e=c(this);
e.css(b,M(this,d,a,e[b]()))}
)}
}
),n.forEach(function(a,b){
c.fn[a]=function(){
var a=c.map(arguments,function(a){
return B(a)?a:w.fragment(a)}
);
if(a.length<1)return this;
var d=this.length,e=d>1,f=b<2;
return this.each(function(c,g){
for(var h=0;
h<a.length;
h++){
var i=a[f?a.length-h-1:h];
O(i,function(a){
a.nodeName!=null&&a.nodeName.toUpperCase()==="SCRIPT"&&(!a.type||a.type==="text/javascript")&&window.eval.call(window,a.innerHTML)}
),e&&c<d-1&&(i=i.cloneNode(!0)),N(b,g,i)}
}
)}
,c.fn[b%2?a+"To":"insert"+(b?"Before":"After")]=function(b){
return c(b)[a](this),this}
}
),w.Z.prototype=c.fn,w.camelize=x,w.uniq=y,c.zepto=w,c}
();
window.Zepto=Zepto,"$"in window||(window.$=Zepto),function(a){
function f(a){
return a._zid||(a._zid=d++)}
function g(a,b,d,e){
b=h(b);
if(b.ns)var g=i(b.ns);
return(c[f(a)]||[]).filter(function(a){
return a&&(!b.e||a.e==b.e)&&(!b.ns||g.test(a.ns))&&(!d||f(a.fn)===f(d))&&(!e||a.sel==e)}
)}
function h(a){
var b=(""+a).split(".");
return{
e:b[0],ns:b.slice(1).sort().join(" ")}
}
function i(a){
return new RegExp("(?:^| )"+a.replace(" "," .* ?")+"(?:|$)")}
function j(b,c,d){
a.isObject(b)?a.each(b,d):b.split(/\s/).forEach(function(a){
d(a,c)}
)}
function k(b,d,e,g,i,k){
k=!!k;
var l=f(b),m=c[l]||(c[l]=[]);
j(d,e,function(c,d){
var e=i&&i(d,c),f=e||d,j=function(a){
var c=f.apply(b,[a].concat(a.data));
return c===!1&&a.preventDefault(),c}
,l=a.extend(h(c),{
fn:d,proxy:j,sel:g,del:e,i:m.length}
);
m.push(l),b.addEventListener(l.e,j,k)}
)}
function l(a,b,d,e){
var h=f(a);
j(b||"",d,function(b,d){
g(a,b,d,e).forEach(function(b){
delete c[h][b.i],a.removeEventListener(b.e,b.proxy,!1)}
)}
)}
function p(b){
var c=a.extend({
originalEvent:b}
,b);
return a.each(o,function(a,d){
c[a]=function(){
return this[d]=m,b[a].apply(b,arguments)}
,c[d]=n}
),c}
function q(a){
if(!("defaultPrevented"in a)){
a.defaultPrevented=!1;
var b=a.preventDefault;
a.preventDefault=function(){
this.defaultPrevented=!0,b.call(this)}
}
}
var b=a.zepto.qsa,c={
}
,d=1,e={
}
;
e.click=e.mousedown=e.mouseup=e.mousemove="MouseEvents",a.event={
add:k,remove:l}
,a.proxy=function(b,c){
if(a.isFunction(b)){
var d=function(){
return b.apply(c,arguments)}
;
return d._zid=f(b),d}
if(typeof c=="string")return a.proxy(b[c],b);
throw new TypeError("expected function")}
,a.fn.bind=function(a,b){
return this.each(function(){
k(this,a,b)}
)}
,a.fn.unbind=function(a,b){
return this.each(function(){
l(this,a,b)}
)}
,a.fn.one=function(a,b){
return this.each(function(c,d){
k(this,a,b,null,function(a,b){
return function(){
var c=a.apply(d,arguments);
return l(d,b,a),c}
}
)}
)}
;
var m=function(){
return!0}
,n=function(){
return!1}
,o={
preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"}
;
a.fn.delegate=function(b,c,d){
var e=!1;
if(c=="blur"||c=="focus")a.iswebkit?c=c=="blur"?"focusout":c=="focus"?"focusin":c:e=!0;
return this.each(function(f,g){
k(g,c,d,b,function(c){
return function(d){
var e,f=a(d.target).closest(b,g).get(0);
if(f)return e=a.extend(p(d),{
currentTarget:f,liveFired:g}
),c.apply(f,[e].concat([].slice.call(arguments,1)))}
}
,e)}
)}
,a.fn.undelegate=function(a,b,c){
return this.each(function(){
l(this,b,c,a)}
)}
,a.fn.live=function(b,c){
return a(document.body).delegate(this.selector,b,c),this}
,a.fn.die=function(b,c){
return a(document.body).undelegate(this.selector,b,c),this}
,a.fn.on=function(b,c,d){
return c==undefined||a.isFunction(c)?this.bind(b,c):this.delegate(c,b,d)}
,a.fn.off=function(b,c,d){
return c==undefined||a.isFunction(c)?this.unbind(b,c):this.undelegate(c,b,d)}
,a.fn.trigger=function(b,c){
return typeof b=="string"&&(b=a.Event(b)),q(b),b.data=c,this.each(function(){
"dispatchEvent"in this&&this.dispatchEvent(b)}
)}
,a.fn.triggerHandler=function(b,c){
var d,e;
return this.each(function(f,h){
d=p(typeof b=="string"?a.Event(b):b),d.data=c,d.target=h,a.each(g(h,b.type||b),function(a,b){
e=b.proxy(d);
if(d.isImmediatePropagationStopped())return!1}
)}
),e}
,"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout change select keydown keypress keyup error".split(" ").forEach(function(b){
a.fn[b]=function(a){
return this.bind(b,a)}
}
),["focus","blur"].forEach(function(b){
a.fn[b]=function(a){
if(a)this.bind(b,a);
else if(this.length)try{
this.get(0)[b]()}
catch(c){
}
return this}
}
),a.Event=function(a,b){
var c=document.createEvent(e[a]||"Events"),d=!0;
if(b)for(var f in b)f=="bubbles"?d=!!b[f]:c[f]=b[f];
return c.initEvent(a,d,!0,null,null,null,null,null,null,null,null,null,null,null,null),c}
}
(Zepto),function(a){
function b(a){
var b=this.os={
}
,c=this.browser={
}
,d=a.match(/WebKit\/([\d.]+)/),e=a.match(/(Android)\s+([\d.]+)/),f=a.match(/(iPad).*OS\s([\d_]+)/),g=!f&&a.match(/(iPhone\sOS)\s([\d_]+)/),h=a.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),i=h&&a.match(/TouchPad/),j=a.match(/Kindle\/([\d.]+)/),k=a.match(/Silk\/([\d._]+)/),l=a.match(/(BlackBerry).*Version\/([\d.]+)/);
if(c.webkit=!!d)c.version=d[1];
e&&(b.android=!0,b.version=e[2]),g&&(b.ios=b.iphone=!0,b.version=g[2].replace(/_/g,".")),f&&(b.ios=b.ipad=!0,b.version=f[2].replace(/_/g,".")),h&&(b.webos=!0,b.version=h[2]),i&&(b.touchpad=!0),l&&(b.blackberry=!0,b.version=l[2]),j&&(b.kindle=!0,b.version=j[1]),k&&(c.silk=!0,c.version=k[1]),!k&&b.android&&a.match(/Kindle Fire/)&&(c.silk=!0)}
b.call(a,navigator.userAgent),a.__detect=b}
(Zepto),function(a,b){
function l(a){
return a.toLowerCase()}
function m(a){
return d?d+a:l(a)}
var c="",d,e,f,g={
Webkit:"webkit",Moz:"",O:"o",ms:"MS"}
,h=window.document,i=h.createElement("div"),j=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,k={
}
;
a.each(g,function(a,e){
if(i.style[a+"TransitionProperty"]!==b)return c="-"+l(a)+"-",d=e,!1}
),k[c+"transition-property"]=k[c+"transition-duration"]=k[c+"transition-timing-function"]=k[c+"animation-name"]=k[c+"animation-duration"]="",a.fx={
off:d===b&&i.style.transitionProperty===b,cssPrefix:c,transitionEnd:m("TransitionEnd"),animationEnd:m("AnimationEnd")}
,a.fn.animate=function(b,c,d,e){
return a.isObject(c)&&(d=c.easing,e=c.complete,c=c.duration),c&&(c/=1e3),this.anim(b,c,d,e)}
,a.fn.anim=function(d,e,f,g){
var h,i={
}
,l,m=this,n,o=a.fx.transitionEnd;
e===b&&(e=.4),a.fx.off&&(e=0);
if(typeof d=="string")i[c+"animation-name"]=d,i[c+"animation-duration"]=e+"s",o=a.fx.animationEnd;
else{
for(l in d)j.test(l)?(h||(h=[]),h.push(l+"("+d[l]+")")):i[l]=d[l];
h&&(i[c+"transform"]=h.join(" ")),!a.fx.off&&typeof d=="object"&&(i[c+"transition-property"]=Object.keys(d).join(","),i[c+"transition-duration"]=e+"s",i[c+"transition-timing-function"]=f||"linear")}
return n=function(b){
if(typeof b!="undefined"){
if(b.target!==b.currentTarget)return;
a(b.target).unbind(o,arguments.callee)}
a(this).css(k),g&&g.call(this)}
,e>0&&this.bind(o,n),setTimeout(function(){
m.css(i),e<=0&&setTimeout(function(){
m.each(function(){
n.call(this)}
)}
,0)}
,0),this}
,i=null}
(Zepto),function($){
function triggerAndReturn(a,b,c){
var d=$.Event(b);
return $(a).trigger(d,c),!d.defaultPrevented}
function triggerGlobal(a,b,c,d){
if(a.global)return triggerAndReturn(b||document,c,d)}
function ajaxStart(a){
a.global&&$.active++===0&&triggerGlobal(a,null,"ajaxStart")}
function ajaxStop(a){
a.global&&!--$.active&&triggerGlobal(a,null,"ajaxStop")}
function ajaxBeforeSend(a,b){
var c=b.context;
if(b.beforeSend.call(c,a,b)===!1||triggerGlobal(b,c,"ajaxBeforeSend",[a,b])===!1)return!1;
triggerGlobal(b,c,"ajaxSend",[a,b])}
function ajaxSuccess(a,b,c){
var d=c.context,e="success";
c.success.call(d,a,e,b),triggerGlobal(c,d,"ajaxSuccess",[b,c,a]),ajaxComplete(e,b,c)}
function ajaxError(a,b,c,d){
var e=d.context;
d.error.call(e,c,b,a),triggerGlobal(d,e,"ajaxError",[c,d,a]),ajaxComplete(b,c,d)}
function ajaxComplete(a,b,c){
var d=c.context;
c.complete.call(d,b,a),triggerGlobal(c,d,"ajaxComplete",[b,c]),ajaxStop(c)}
function empty(){
}
function mimeToDataType(a){
return a&&(a==htmlType?"html":a==jsonType?"json":scriptTypeRE.test(a)?"script":xmlTypeRE.test(a)&&"xml")||"text"}
function appendQuery(a,b){
return(a+"&"+b).replace(/[&?]{
1,2}
/,"?")}
function serializeData(a){
isObject(a.data)&&(a.data=$.param(a.data)),a.data&&(!a.type||a.type.toUpperCase()=="GET")&&(a.url=appendQuery(a.url,a.data))}
function serialize(a,b,c,d){
var e=$.isArray(b);
$.each(b,function(b,f){
d&&(b=c?d:d+"["+(e?"":b)+"]"),!d&&e?a.add(f.name,f.value):(c?$.isArray(f):isObject(f))?serialize(a,f,c,b):a.add(b,f)}
)}
var jsonpID=0,isObject=$.isObject,document=window.document,key,name,rscript=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,scriptTypeRE=/^(?:text|application)\/javascript/i,xmlTypeRE=/^(?:text|application)\/xml/i,jsonType="application/json",htmlType="text/html",blankRE=/^\s*$/;
$.active=0,$.ajaxJSONP=function(a){
var b="jsonp"+ ++jsonpID,c=document.createElement("script"),d=function(){
$(c).remove(),b in window&&(window[b]=empty),ajaxComplete("abort",e,a)}
,e={
abort:d}
,f;
return a.error&&(c.onerror=function(){
e.abort(),a.error()}
),window[b]=function(d){
clearTimeout(f),$(c).remove(),delete window[b],ajaxSuccess(d,e,a)}
,serializeData(a),c.src=a.url.replace(/=\?/,"="+b),$("head").append(c),a.timeout>0&&(f=setTimeout(function(){
e.abort(),ajaxComplete("timeout",e,a)}
,a.timeout)),e}
,$.ajaxSettings={
type:"GET",beforeSend:empty,success:empty,error:empty,complete:empty,context:null,global:!0,xhr:function(){
return new window.XMLHttpRequest}
,accepts:{
script:"text/javascript,application/javascript",json:jsonType,xml:"application/xml,text/xml",html:htmlType,text:"text/plain"}
,crossDomain:!1,timeout:0}
,$.ajax=function(options){
var settings=$.extend({
}
,options||{
}
);
for(key in $.ajaxSettings)settings[key]===undefined&&(settings[key]=$.ajaxSettings[key]);
ajaxStart(settings),settings.crossDomain||(settings.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(settings.url)&&RegExp.$2!=window.location.host);
var dataType=settings.dataType,hasPlaceholder=/=\?/.test(settings.url);
if(dataType=="jsonp"||hasPlaceholder)return hasPlaceholder||(settings.url=appendQuery(settings.url,"callback=?")),$.ajaxJSONP(settings);
settings.url||(settings.url=window.location.toString()),serializeData(settings);
var mime=settings.accepts[dataType],baseHeaders={
}
,protocol=/^([\w-]+:)\/\//.test(settings.url)?RegExp.$1:window.location.protocol,xhr=$.ajaxSettings.xhr(),abortTimeout;
settings.crossDomain||(baseHeaders["X-Requested-With"]="XMLHttpRequest"),mime&&(baseHeaders.Accept=mime,mime.indexOf(",")>-1&&(mime=mime.split(",",2)[0]),xhr.overrideMimeType&&xhr.overrideMimeType(mime));
if(settings.contentType||settings.data&&settings.type.toUpperCase()!="GET")baseHeaders["Content-Type"]=settings.contentType||"application/x-www-form-urlencoded";
settings.headers=$.extend(baseHeaders,settings.headers||{
}
),xhr.onreadystatechange=function(){
if(xhr.readyState==4){
clearTimeout(abortTimeout);
var result,error=!1;
if(xhr.status>=200&&xhr.status<300||xhr.status==304||xhr.status==0&&protocol=="file:"){
dataType=dataType||mimeToDataType(xhr.getResponseHeader("content-type")),result=xhr.responseText;
try{
dataType=="script"?(1,eval)(result):dataType=="xml"?result=xhr.responseXML:dataType=="json"&&(result=blankRE.test(result)?null:JSON.parse(result))}
catch(e){
error=e}
error?ajaxError(error,"parsererror",xhr,settings):ajaxSuccess(result,xhr,settings)}
else ajaxError(null,"error",xhr,settings)}
}
;
var async="async"in settings?settings.async:!0;
xhr.open(settings.type,settings.url,async);
for(name in settings.headers)xhr.setRequestHeader(name,settings.headers[name]);
return ajaxBeforeSend(xhr,settings)===!1?(xhr.abort(),!1):(settings.timeout>0&&(abortTimeout=setTimeout(function(){
xhr.onreadystatechange=empty,xhr.abort(),ajaxError(null,"timeout",xhr,settings)}
,settings.timeout)),xhr.send(settings.data?settings.data:null),xhr)}
,$.get=function(a,b){
return $.ajax({
url:a,success:b}
)}
,$.post=function(a,b,c,d){
return $.isFunction(b)&&(d=d||c,c=b,b=null),$.ajax({
type:"POST",url:a,data:b,success:c,dataType:d}
)}
,$.getJSON=function(a,b){
return $.ajax({
url:a,success:b,dataType:"json"}
)}
,$.fn.load=function(a,b){
if(!this.length)return this;
var c=this,d=a.split(/\s/),e;
return d.length>1&&(a=d[0],e=d[1]),$.get(a,function(a){
c.html(e?$(document.createElement("div")).html(a.replace(rscript,"")).find(e).html():a),b&&b.call(c)}
),this}
;
var escape=encodeURIComponent;
$.param=function(a,b){
var c=[];
return c.add=function(a,b){
this.push(escape(a)+"="+escape(b))}
,serialize(c,a,b),c.join("&").replace("%20","+")}
}
(Zepto),function(a){
a.fn.serializeArray=function(){
var b=[],c;
return a(Array.prototype.slice.call(this.get(0).elements)).each(function(){
c=a(this);
var d=c.attr("type");
this.nodeName.toLowerCase()!="fieldset"&&!this.disabled&&d!="submit"&&d!="reset"&&d!="button"&&(d!="radio"&&d!="checkbox"||this.checked)&&b.push({
name:c.attr("name"),value:c.val()}
)}
),b}
,a.fn.serialize=function(){
var a=[];
return this.serializeArray().forEach(function(b){
a.push(encodeURIComponent(b.name)+"="+encodeURIComponent(b.value))}
),a.join("&")}
,a.fn.submit=function(b){
if(b)this.bind("submit",b);
else if(this.length){
var c=a.Event("submit");
this.eq(0).trigger(c),c.defaultPrevented||this.get(0).submit()}
return this}
}
(Zepto),function(a){
function d(a){
return"tagName"in a?a:a.parentNode}
function e(a,b,c,d){
var e=Math.abs(a-b),f=Math.abs(c-d);
return e>=f?a-b>0?"Left":"Right":c-d>0?"Up":"Down"}
function h(){
g=null,b.last&&(b.el.trigger("longTap"),b={
}
)}
function i(){
g&&clearTimeout(g),g=null}
var b={
}
,c,f=750,g;
a(document).ready(function(){
var j,k;
a(document.body).bind("touchstart",function(e){
j=Date.now(),k=j-(b.last||j),b.el=a(d(e.touches[0].target)),c&&clearTimeout(c),b.x1=e.touches[0].pageX,b.y1=e.touches[0].pageY,k>0&&k<=250&&(b.isDoubleTap=!0),b.last=j,g=setTimeout(h,f)}
).bind("touchmove",function(a){
i(),b.x2=a.touches[0].pageX,b.y2=a.touches[0].pageY}
).bind("touchend",function(a){
i(),b.isDoubleTap?(b.el.trigger("doubleTap"),b={
}
):b.x2&&Math.abs(b.x1-b.x2)>30||b.y2&&Math.abs(b.y1-b.y2)>30?(b.el.trigger("swipe")&&b.el.trigger("swipe"+e(b.x1,b.x2,b.y1,b.y2)),b={
}
):"last"in b&&(b.el.trigger("tap"),c=setTimeout(function(){
c=null,b.el.trigger("singleTap"),b={
}
}
,250))}
).bind("touchcancel",function(){
c&&clearTimeout(c),g&&clearTimeout(g),g=c=null,b={
}
}
)}
),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(b){
a.fn[b]=function(a){
return this.bind(b,a)}
}
)}
(Zepto);
// Zepto.js// (c) 2010-2015 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license.;
(function($){
var touch ={
}
,touchTimeout,tapTimeout,swipeTimeout,longTapTimeout,longTapDelay = 750,gesture function swipeDirection(x1,x2,y1,y2){
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left':'Right'):(y1 - y2 > 0 ? 'Up':'Down')}
function longTap(){
longTapTimeout = null if (touch.last){
touch.el.trigger('longTap') touch ={
}
}
}
function cancelLongTap(){
if (longTapTimeout) clearTimeout(longTapTimeout) longTapTimeout = null}
function cancelAll(){
if (touchTimeout) clearTimeout(touchTimeout) if (tapTimeout) clearTimeout(tapTimeout) if (swipeTimeout) clearTimeout(swipeTimeout) if (longTapTimeout) clearTimeout(longTapTimeout) touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null touch ={
}
}
function isPrimaryTouch(event){
return (event.pointerType == 'touch' || event.pointerType == event.MSPOINTER_TYPE_TOUCH) && event.isPrimary}
function isPointerEventType(e,type){
return (e.type == 'pointer'+type || e.type.toLowerCase() == 'mspointer'+type)}
$(document).ready(function(){
var now,delta,deltaX = 0,deltaY = 0,firstTouch,_isPointerType if ('MSGesture' in window){
gesture = new MSGesture() gesture.target = document.body}
$(document) .bind('MSGestureEnd',function(e){
var swipeDirectionFromVelocity = e.velocityX > 1 ? 'Right':e.velocityX < -1 ? 'Left':e.velocityY > 1 ? 'Down':e.velocityY < -1 ? 'Up':null;
if (swipeDirectionFromVelocity){
touch.el.trigger('swipe') touch.el.trigger('swipe'+ swipeDirectionFromVelocity)}
}
) .on('touchstart MSPointerDown pointerdown',function(e){
if((_isPointerType = isPointerEventType(e,'down')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e:e.touches[0] if (e.touches && e.touches.length === 1 && touch.x2){
// Clear out touch movement data if we have it sticking around // This can occur if touchcancel doesn't fire due to preventDefault,etc. touch.x2 = undefined touch.y2 = undefined}
now = Date.now() delta = now - (touch.last || now) touch.el = $('tagName' in firstTouch.target ? firstTouch.target:firstTouch.target.parentNode) touchTimeout && clearTimeout(touchTimeout) touch.x1 = firstTouch.pageX touch.y1 = firstTouch.pageY if (delta > 0 && delta <= 250) touch.isDoubleTap = true touch.last = now longTapTimeout = setTimeout(longTap,longTapDelay) // adds the current touch contact for IE gesture recognition if (gesture && _isPointerType) gesture.addPointer(e.pointerId);
}
) .on('touchmove MSPointerMove pointermove',function(e){
if((_isPointerType = isPointerEventType(e,'move')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e:e.touches[0] cancelLongTap() touch.x2 = firstTouch.pageX touch.y2 = firstTouch.pageY deltaX += Math.abs(touch.x1 - touch.x2) deltaY += Math.abs(touch.y1 - touch.y2)}
) .on('touchend MSPointerUp pointerup',function(e){
if((_isPointerType = isPointerEventType(e,'up')) && !isPrimaryTouch(e)) return cancelLongTap() // swipe if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) swipeTimeout = setTimeout(function(){
touch.el.trigger('swipe') touch.el.trigger('swipe' + (swipeDirection(touch.x1,touch.x2,touch.y1,touch.y2))) touch ={
}
}
,0) // normal tap else if ('last' in touch) // don't fire tap when delta position changed by more than 30 pixels,// for instance when moving to a point and back to origin if (deltaX < 30 && deltaY < 30){
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires // ('tap' fires before 'scroll') tapTimeout = setTimeout(function(){
// trigger universal 'tap' with the option to cancelTouch() // (cancelTouch cancels processing of single vs double taps for faster 'tap' response) var event = $.Event('tap') event.cancelTouch = cancelAll touch.el.trigger(event) // trigger double tap immediately if (touch.isDoubleTap){
if (touch.el) touch.el.trigger('doubleTap') touch ={
}
}
// trigger single tap after 250ms of inactivity else{
touchTimeout = setTimeout(function(){
touchTimeout = null if (touch.el) touch.el.trigger('singleTap') touch ={
}
}
,250)}
}
,0)}
else{
touch ={
}
}
deltaX = deltaY = 0}
) // when the browser window loses focus,// for example when a modal dialog is shown,// cancel all ongoing events .on('touchcancel MSPointerCancel pointercancel',cancelAll) // scrolling the window indicates intention of the user // to scroll,not tap or swipe,so cancel all ongoing events $(window).on('scroll',cancelAll)}
);
['swipe','swipeLeft','swipeRight','swipeUp','swipeDown','doubleTap','tap','singleTap','longTap'].forEach(function(eventName){
$.fn[eventName] = function(callback){
return this.on(eventName,callback)}
}
)}
)(Zepto)CSS代码(animate.min.css):
@charset "UTF-8";/*!Animate.css - http://daneden.me/animateLicensed under the MIT license - http://opensource.org/licenses/MITCopyright (c) 2013 Daniel Eden*/
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}
90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}
}
@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}
90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}
}
.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
@keyframes flash{0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
.flash{-webkit-animation-name:flash;animation-name:flash}
@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
.shake{-webkit-animation-name:shake;animation-name:shake}
@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}
40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}
60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}
80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}
100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}
}
@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}
40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}
60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}
80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}
100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}
}
.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}
15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}
30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}
45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}
60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}
75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}
100%{-webkit-transform:none;transform:none}
}
@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}
15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}
30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}
45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}
60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}
75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}
100%{-webkit-transform:none;-ms-transform:none;transform:none}
}
.wobble{-webkit-animation-name:wobble;animation-name:wobble}
@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}
@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
100%{-webkit-transform:none;-ms-transform:none;transform:none}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;-ms-transform:none;transform:none}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
100%{-webkit-transform:none;-ms-transform:none;transform:none}
}
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}
@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
}
@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
}
.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}
@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}
@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeOutDown{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
}
@keyframes fadeOutDown{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
}
.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}
@-webkit-keyframes fadeOutDownBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
@keyframes fadeOutDownBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}
@-webkit-keyframes fadeOutLeft{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
}
@keyframes fadeOutLeft{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
@keyframes fadeOutLeftBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}
@-webkit-keyframes fadeOutRight{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
}
@keyframes fadeOutRight{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
@-webkit-keyframes fadeOutRightBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
@keyframes fadeOutRightBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}
@-webkit-keyframes fadeOutUp{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}
@keyframes fadeOutUp{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}
.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
@-webkit-keyframes fadeOutUpBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
@keyframes fadeOutUpBig{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}
100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}
100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}
}
.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}
100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}
100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}
}
.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}
30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}
}
@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}
30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}
}
.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}
30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}
}
@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}
30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}
}
.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
100%{-webkit-transform:none;transform:none;opacity:1}
}
@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
@-webkit-keyframes lightSpeedOut{0%{opacity:1}
100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}
}
@keyframes lightSpeedOut{0%{opacity:1}
100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}
}
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}
}
@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}
100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}
}
.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}
@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}
}
@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}
}
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}
@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
}
@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
}
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}
@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
}
@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}
}
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}
@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}
}
@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}
}
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}
@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}
100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}
}
@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}
100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}
}
.hinge{-webkit-animation-name:hinge;animation-name:hinge}
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
@-webkit-keyframes rollOut{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}
}
@keyframes rollOut{0%{opacity:1}
100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}
}
.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}
@-webkit-keyframes zoomOut{0%{opacity:1}
50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
100%{opacity:0}
}
@keyframes zoomOut{0%{opacity:1}
50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
100%{opacity:0}
}
.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}
@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}
@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}
100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}
}
@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}
100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}
}
.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}
@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}
100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}
}
@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}
100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}
}
.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}
@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
}
.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
分享到QQ
分享到微博
微信扫一扫
