以下是 jquery+css3嵌套式手风琴特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery+css3嵌套式手风琴特效</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<link rel="stylesheet" type="text/css" href="font/titillium/stylesheet.css">
<link rel="stylesheet" type="text/css" href="font/exo-demibold/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/eli-style.css">
<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/accordion-single.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!--[if lte IE 9]>
<style type="text/css">
.content{
height: 240px;
}
.arc label{
border-bottom:1px solid #A3A3A3;
}
</style>
<![endif]-->
</head>
<body class="eli">
<!-- Live Preview -->
<section class="demo arc">
<!-- Lable 1 -->
<div>
<input id="label-1" name="label" type="radio" checked/>
<label for="label-1" id="item1" class="label-small">
<i class="label-icon-left icon-dashboard"></i>Label One<i class="label-icon-right1 icon-plus-sign"></i><i class="label-icon-right2 icon-minus-sign"></i>
</label>
<div class="content demo-preview">
<div class="cnt-wrapper">
<h3>Accordion Menu</h3>
<div class="sizes">
<div class="size1">
<p>Size1</p>
</div>
</div> <!-- /sizes -->
<div class="sizes">
<div class="size2">
<p>Size2</p>
</div>
<div class="size2">
<p>Size2</p>
</div>
</div> <!-- /sizes -->
<div class="sizes">
<div class="size3">
<p>Size3</p>
</div>
<div class="size3">
<p>Size3</p>
</div>
<div class="size3">
<p>Size3</p>
</div>
</div> <!-- /sizes -->
<div class="sizes">
<div class="size4">
<p>Size4</p>
</div>
<div class="size4">
<p>Size4</p>
</div>
<div class="size4">
<p>Size4</p>
</div>
<div class="size4">
<p>Size4</p>
</div>
</div> <!-- /sizes -->
<div class="sizes">
<div class="size5">
<p>Size5</p>
</div>
<div class="size5">
<p>Size5</p>
</div>
<div class="size5">
<p>Size5</p>
</div>
<div class="size5">
<p>Size5</p>
</div>
<div class="size5">
<p>Size5</p>
</div>
</div> <!-- /sizes -->
<div class="sizes">
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
<div class="size6">
<p>Size6</p>
</div>
</div> <!-- /sizes -->
</div> <!-- /cnt-wrapper -->
</div> <!-- /content -->
</div>
<!-- Lable 2 -->
<div>
<input id="label-2" name="label" type="radio"/>
<label for="label-2" id="item2" class="label-small">
<i class="label-icon-left icon-leaf "></i>Label Two<i class="label-icon-right1 icon-plus-sign"></i><i class="label-icon-right2 icon-minus-sign"></i>
</label>
<div class="content cnt-scroll">
<div class="cnt-wrapper">
<div class="sizes">
<div class="size3">
<h4>Text Center</h4>
<p class="text-center">Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns.</p>
</div>
<div class="size3">
<h4>Text Right</h4>
<p class="text-right">Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns.</p>
</div>
<div class="size3">
<h4>Text Justify</h4>
<p class="text-justify">Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns.</p>
</div>
</div> <!-- /sizes -->
<hr />
<div class="sizes">
<div class="size1">
<h2>Large Paragraph</h2>
<p class="p-large">Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns.</p>
</div>
<div class="size1">
<h4>Small Paragraph</h4>
<p class="p-small">Web page backgrounds used to be <a href="#">commonplace, but they became</a> unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic background (or worse) on the poor <a href="#">reader</a>, too.</p>
</div>
</div> <!-- /sizes -->
</div> <!-- /cnt-wrapper -->
</div> <!-- /content -->
</div>
<!-- Lable 3 -->
<div>
<input id="label-3" name="label" type="radio"/>
<label for="label-3" id="item3" class="label-small">
<i class="label-icon-left icon-trophy "></i>Label Three<i class="label-icon-right1 icon-plus-sign"></i><i class="label-icon-right2 icon-minus-sign"></i>
</label>
<div class="content">
<div class="cnt-wrapper">
<div class="sizes">
<div class="size1">
<h3>Paragraph + Image</h3>
<img src="images/thumb4.png" class="img-right border-radius3">
<p>Web page backgrounds used to be <a href="#">commonplace, but they became</a> unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic background (or worse) on the poor reader, too.</p>
</div>
<div class="size1">
<img src="images/thumb4.png" class="img-left border-radius1 box-shadow2">
<p>Web page backgrounds used to be <a href="#">commonplace, but they became</a> unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic background (or worse) on the poor reader, too.</p>
</div>
</div> <!-- /sizes -->
</div> <!-- /cnt-wrapper -->
</div> <!-- /content -->
</div>
<!-- Lable 4 -->
<div>
<input id="label-4" name="label" type="radio"/>
<label for="label-4" id="item4" class="label-small">
<i class="label-icon-left icon-gift"></i>Label four<i class="label-icon-right1 icon-plus-sign"></i><i class="label-icon-right2 icon-minus-sign"></i>
</label>
<div class="content cnt-scroll">
<div class="cnt-wrapper">
<div class="size1">
<h3>Button</h3>
<div class="button-wrapper">
<a href="#" class="button button-mini"><i class="icon-coffee"></i>mini</a>
<a href="#" class="button button-normal"><i class="icon-coffee"></i>normal</a>
<a href="#" class="button button-large"><i class="icon-coffee"></i>large</a>
</div>
<hr />
<h3>Rounded corner buttons</h3>
<div class="button-wrapper">
<a href="#" class="button button-mini border-radius5 danger"><i class="icon-coffee"></i>button</a>
<a href="#" class="button button-normal border-radius5"><i class="icon-coffee"></i>button</a>
<a href="#" class="button button-large border-radius5"><i class="icon-coffee"></i>button</a>
</div>
</div>
<hr />
<div class="sizes">
<div class="size2">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</div>
<div class="size2">
<div class="block border-radius1">
<span class="header"><i class="icon-coffee"></i>Block Heading</span>
Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns
<span class="footer">
<a href="#" class="button button-mini">Read More...</a>
</span>
</div>
</div>
</div> <!-- /sizes -->
</div> <!-- /cnt-wrapper -->
</div> <!-- /content -->
</div>
<!-- Lable 5 -->
<div>
<input id="label-5" name="label" type="radio"/>
<label for="label-5" id="item5" class="label-small">
<i class="label-icon-left icon-question-sign "></i>Label Five<i class="icon-plus-sign label-icon-right1"></i><i class="icon-minus-sign label-icon-right2"></i>
</label>
<div class="content">
<div class="cnt-wrapper">
<div class="sizes">
<div class="size2">
<ul>
<li class="header">Header</li>
<li><a href="#"><i class="icon-ok"></i>List Level 1</a></li>
<li><i class="icon-ok"></i>List Level 1
<ul>
<li><a href="#"><i class="icon-ok"></i>List Level 2</a></li>
<li><a href="#"><i class="icon-ok"></i>List Level 2</a></li>
<li><a href="#"><i class="icon-ok"></i>List Level 2</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-ok"></i>List Level 1</a></li>
<li><a href="#"><i class="icon-ok"></i>List Level 1</a></li>
<li><a href="#"><i class="icon-ok"></i>List Level 1</a></li>
</ul>
</div>
<div class="size2">
<ul class="list-block box-shadow1">
<li class="header"><i class="icon-ok"></i>Header 1</li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
<li class="header"><i class="icon-ok"></i>Header 2</li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
<li><a href="#"><i class="icon-ok"></i>list 1</a></li>
</ul>
</div>
</div> <!-- /sizes -->
</div> <!-- /cnt-wrapper -->
</div> <!-- /content -->
</div>
</section>
</body>
</html>
JS代码(accordion-single.js):
$(document).ready(function(){
/* Nomenclature **************/
var label= $('label');
var content= $('.content');
/* Default values ***********/
$('i.label-icon-right2:first').show();
$('i.label-icon-right1:first').hide();
$(content).not(":first").hide();
$(label).addClass('default');
$('label:first').addClass('clicked');
/* Mouse click (label)****/
$(label).on("click",function(){
/* Nomenclature **************/
var tLabel = $(this);
var tContent = tLabel.next();
/* Default values ***********/
$('i.label-icon-right1').show();
$('i.label-icon-right2').hide();
content.slideUp("fast");
tContent.slideDown("slow");
/* Hide and show right icon */
$(tLabel).children('i.label-icon-right1').hide();
$(tLabel).children('i.label-icon-right2').show();
/* Change Label Color */
$(label).removeClass('clicked');
$(tLabel).addClass('clicked');
/* Open and close content */
if(tContent.is(":visible")){
return;
}
}
);
/* Mouse Over On (label)****/
$(label).hover(function(){
var tLabel = $(this);
$(tLabel).addClass('hover');
}
,function(){
$(label).removeClass('hover');
}
);
}
);
JS代码(modernizr.custom.29473.js):
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load */
;
window.Modernizr=function(a,b,c){
function A(a,b){
var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");
return z(d,b)}
function z(a,b){
for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;
return!1}
function y(a,b){
return!!~(""+a).indexOf(b)}
function x(a,b){
return typeof a===b}
function w(a,b){
return v(prefixes.join(a+";
")+(b||""))}
function v(a){
k.cssText=a}
var d="2.0.6",e={
}
,f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={
}
,p={
}
,q={
}
,r=[],s,t={
}
.hasOwnProperty,u;
!x(t,c)&&!x(t.call,c)?u=function(a,b){
return t.call(a,b)}
:u=function(a,b){
return b in a&&x(a.constructor.prototype[b],c)}
,o.cssanimations=function(){
return A("animationName")}
;
for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));
v(""),j=l=null,a.attachEvent&&function(){
var a=b.createElement("div");
a.innerHTML="<elem></elem>";
return a.childNodes.length!==1}
()&&function(a,b){
function s(a){
var b=-1;
while(++b<g)a.createElement(f[b])}
a.iepp=a.iepp||{
}
;
var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{
\}
]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({
[\\n\\w\\W]*?}
)","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;
d.getCSS=function(a,b){
if(a+""===c)return"";
var e=-1,f=a.length,g,h=[];
while(++e<f){
g=a[e];
if(g.disabled)continue;
b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}
return h.join("")}
,d.parseCSS=function(a){
var b=[],c;
while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);
return b.join("\n")}
,d.writeHTML=function(){
var a=-1;
r=r||b.body;
while(++a<g){
var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;
while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}
l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")}
,d._beforePrint=function(){
p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()}
,d.restoreHTML=function(){
o.innerHTML="",m.removeChild(o),m.appendChild(r)}
,d._afterPrint=function(){
d.restoreHTML(),p.styleSheet.cssText=""}
,s(b),s(l);
d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}
(a,b),e._version=d,e._domPrefixes=n,e.testProp=function(a){
return z([a])}
,e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");
return e}
(this,this.document),function(a,b,c){
function k(a){
return!a||a=="loaded"||a=="complete"}
function j(){
var a=1,b=-1;
while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;
a&&g()}
function i(a){
var c=b.createElement("script"),d;
c.src=a.s,c.onreadystatechange=c.onload=function(){
!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)}
,m(function(){
d||(d=1,j())}
,H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}
function h(a){
var c=b.createElement("link"),d;
c.href=a.s,c.rel="stylesheet",c.type="text/css";
if(!a.e&&(w||r)){
var e=function(a){
m(function(){
if(!d)try{
a.sheet.cssRules.length?(d=1,j()):e(a)}
catch(b){
b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){
j()}
,0)):e(a)}
}
,0)}
;
e(c)}
else c.onload=function(){
d||(d=1,m(function(){
j()}
,0))}
,a.e&&c.onload();
m(function(){
d||(d=1,j())}
,H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}
function g(){
var a=p.shift();
q=1,a?a.t?m(function(){
a.t=="c"?h(a):i(a)}
,0):(a(),j()):q=0}
function f(a,c,d,e,f,h){
function i(){
!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){
u.removeChild(l)}
,0))}
var l=b.createElement(a),o=0,r={
t:d,s:c,e:h}
;
l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){
r.e=r.r=1,g()}
),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){
o||(u.removeChild(l),r.r=r.e=o=1,j())}
,H.errorTimeout)}
function e(a,b,c){
var d=b=="c"?z:y;
q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());
return this}
function d(){
var a=H;
a.loader={
load:e,i:0}
;
return 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=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){
return o.call(a)=="[object Array]"}
,B=function(a){
return Object(a)===a}
,C=function(a){
return typeof a=="string"}
,D=function(a){
return o.call(a)=="[object Function]"}
,E=[],F={
}
,G,H;
H=function(a){
function f(a){
var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={
url:d,origUrl:d,prefixes:b}
,g,h;
for(h=0;
h<e;
h++)g=F[b[h]],g&&(f=g(f));
for(h=0;
h<c;
h++)f=E[h](f);
return f}
function e(a,b,e,g,h){
var i=f(a),j=i.autoCallback;
if(!i.bypass){
b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);
if(i.instead)return i.instead(a,b,e,g,h);
e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){
d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)}
)}
}
function b(a,b){
function c(a){
if(C(a))e(a,h,b,0,d);
else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}
var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;
c(f),c(g),a.complete&&b.load(a.complete)}
var g,h,i=this.yepnope.loader;
if(C(a))e(a,0,i,0);
else if(A(a))for(g=0;
g<a.length;
g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);
else B(a)&&b(a,i)}
,H.addPrefix=function(a,b){
F[a]=b}
,H.addFilter=function(a){
E.push(a)}
,H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){
b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"}
,0)),a.yepnope=d()}
(this,this.document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
CSS代码(animation.css):
@charset "UTF-8";/*** 01 flash *************************/
@-webkit-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;}
/*** 02 shake *************************/
@-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);}
}
@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;}
/*** 03 bounce *************************/
/*** 04 tada *************************/
@-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);}
}
@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;}
/*** 05 swing *************************/
@-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);}
}
@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;}
/*** 06 wobble *************************/
@-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%);}
}
@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;}
/*** 07 pulse *************************/
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(1.1);}
100%{-webkit-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;}
/*** 08 flip *************************/
@-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;}
}
@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;}
/*** 09 flipInX *************************/
@-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;}
}
@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;}
/*** 10 flipOutX *************************/
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-webkit-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;}
/*** 11 flipInY *************************/
@-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;}
}
@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;}
/*** 12 flipOutY *************************/
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{-webkit-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;}
/*** 13 fadeIn *************************/
@-webkit-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;}
/*** 14 fadeInUp *************************/
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);}
100%{opacity:1;-webkit-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;}
/*** 15 fadeInDown *************************/
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}
100%{opacity:1;-webkit-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;}
/*** 16 fadeInLeft *************************/
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}
100%{opacity:1;-webkit-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;}
/*** 17 fadeInRight *************************/
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}
100%{opacity:1;-webkit-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;}
/*** 18 fadeInUpBig *************************/
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}
100%{opacity:1;-webkit-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;}
/*** 19 fadeInDownBig *************************/
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);}
100%{opacity:1;-webkit-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;}
/*** 20 fadeInLeftBig *************************/
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);}
100%{opacity:1;-webkit-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;}
/*** 21 fadeInRightBig *************************/
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);}
100%{opacity:1;-webkit-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;}
/*** 22 fadeOut *************************/
@-webkit-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;}
/*** 23 fadeOutUp *************************/
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-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;}
/*** 24 fadeOutDown *************************/
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-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;}
/*** 25 fadeOutLeft *************************/
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-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;}
/*** 26 fadeOutRight *************************/
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-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;}
/*** 27 fadeOutUpBig *************************/
@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-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;}
/*** 28 fadeOutDownBig *************************/
@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-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;}
/*** 29 fadeOutLeftBig *************************/
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-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;}
/*** 30 fadeOutRightBig *************************/
@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-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;}
/*** 31 bounceIn *************************/
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}
50%{opacity:1;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(.9);}
100%{-webkit-transform:scale(1);}
}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}
50%{opacity:1;transform:scale(1.05);}
70%{transform:scale(.9);}
100%{transform:scale(1);}
}
.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}
/*** 32 bounceInUp *************************/
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}
60%{opacity:1;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp;}
/*** 33 bounceInDown *************************/
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}
60%{opacity:1;-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;}
/*** 34 bounceInLeft *************************/
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}
60%{opacity:1;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0);}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft;}
/*** 35 bounceInRight *************************/
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}
60%{opacity:1;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight;}
/*** 36 bounceOut *************************/
@-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);}
}
@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;}
/*** 37 bounceOutUp *************************/
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(20px);}
100%{opacity:0;-webkit-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;}
/*** 38 bounceOutDown *************************/
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(-20px);}
100%{opacity:0;-webkit-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;}
/*** 39 bounceOutLeft *************************/
@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(20px);}
100%{opacity:0;-webkit-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;}
/*** 40 bounceOutRight *************************/
@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(-20px);}
100%{opacity:0;-webkit-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;}
/*** 41 rotateIn *************************/
@-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;}
}
@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;}
/*** 42 rotateInUpLeft *************************/
@-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;}
}
@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;}
/*** 43 rotateInDownLeft *************************/
@-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;}
}
@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;}
/*** 44 rotateInUpRight *************************/
@-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;}
}
@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;}
/*** 45 rotateInDownRight *************************/
@-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;}
}
@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;}
/*** 46 rotateOut *************************/
@-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;}
}
@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;}
/*** 47 rotateOutUpLeft *************************/
@-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;}
}
@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;}
/*** 48 rotateOutDownLeft *************************/
@-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;}
}
@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;}
/*** 49 rotateOutUpRight *************************/
@-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;}
}
@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;}
/*** 50 rotateOutDownRight *************************/
@-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;}
}
@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;}
/*** 51 hinge *************************/
@-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;}
}
@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;}
/*** 52 rollIn *************************/
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;-webkit-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;}
/*** 53 rollOut *************************/
@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}
100%{opacity:0;-webkit-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;}
/*** 54 lightSpeedIn *************************/
@-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;}
}
@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;}
/*** 55 lightSpeedOut *************************/
@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-webkit-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;}
/*** 56 wiggle *************************/
@-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);}
}
@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;}
/*** 57 left *************************/
@-webkit-keyframes left{0%{left:-100px;}
90%{left:50px;}
100%{left:0;}
}
@keyframes left{0%{left:-100px;}
90%{left:50px;}
100%{left:0;}
}
.left{-webkit-animation-name:left;-moz-animation-name:left;-o-animation-name:left;animation-name:left;}
/*** 58 right *************************/
@-webkit-keyframes right{0%{left:100px;}
90%{left:-50px;}
100%{left:0;}
}
@keyframes right{0%{left:100px;}
90%{left:-50px;}
100%{left:0;}
}
.right{-webkit-animation-name:right;-moz-animation-name:right;-o-animation-name:right;animation-name:right;}
/*** 59 top *************************/
@-webkit-keyframes top{0%{top:-200px;}
80%{top:50px;}
100%{top:0;}
}
@keyframes top{0%{top:-200px;}
80%{top:50px;}
100%{top:0;}
}
.top{-webkit-animation-name:top;-moz-animation-name:top;-o-animation-name:top;animation-name:top;}
/*** 60 bottom *************************/
@-webkit-keyframes bottom{0%{top:300px;}
80%{top:-100px;}
100%{top:0;}
}
@keyframes bottom{0%{top:300px;}
80%{top:-100px;}
100%{top:0;}
}
.bottom{-webkit-animation-name:bottom;-moz-animation-name:bottom;-o-animation-name:bottom;animation-name:bottom;}
/*** 61 zoomIn *************************/
@-webkit-keyframes 'zoomIn'{0%{transform:scale(0.7);-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes zoomIn{0%{transform:scale(0.7);-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-o-animation-name:zoomIn;animation-name:zoomIn;}
/*** 62 zoomOut *************************/
@-webkit-keyframes zoomOut{0%{transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes zoomOut{0%{transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-o-animation-name:zoomOut;animation-name:zoomOut;}
/*** 63 rotate *************************/
@-webkit-keyframes rotate{0%{transform:rotate(-360deg) scale(0.1);-webkit-transform:rotate(-360deg) scale(0.1);-moz-transform:rotate(-360deg) scale(0.1);-o-transform:rotate(-360deg) scale(0.1);-ms-transform:rotate(-360deg) scale(0.1);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes rotate{0%{transform:rotate(-360deg) scale(0.1);-webkit-transform:rotate(-360deg) scale(0.1);-moz-transform:rotate(-360deg) scale(0.1);-o-transform:rotate(-360deg) scale(0.1);-ms-transform:rotate(-360deg) scale(0.1);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.rotate{-webkit-animation-name:rotate;-moz-animation-name:rotate;-o-animation-name:rotate;animation-name:rotate;}
/*** 64 sky *************************/
@-webkit-keyframes sky{0%{top:-350px;opacity:.2transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);}
90%{top:100px;opacity:.7transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);}
100%{top:0;opacity:1transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
}
@keyframes sky{0%{top:-350px;opacity:.2transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);}
90%{top:100px;opacity:.7transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);}
100%{top:0;opacity:1transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
}
.sky{-webkit-animation-name:sky;-moz-animation-name:sky;-o-animation-name:sky;animation-name:sky;}
/*** 65 dance *************************/
@-webkit-keyframes dance{0%{transform:rotate(-60deg) scale(0.1);-webkit-transform:rotate(-60deg) scale(0.1);-moz-transform:rotate(-60deg) scale(0.1);-o-transform:rotate(-60deg) scale(0.1);-ms-transform:rotate(-60deg) scale(0.1);opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;}
50%{transform:rotate(60deg) scale(0.5);-webkit-transform:rotate(60deg) scale(0.5);-moz-transform:rotate(60deg) scale(0.5);-o-transform:rotate(60deg) scale(0.5);-ms-transform:rotate(60deg) scale(0.5);opacity:.7;-webkit-opacity:.7;-moz-opacity:.7;}
100%{transform:none;-webkit-transform:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes dance{0%{transform:rotate(-60deg) scale(0.1);-webkit-transform:rotate(-60deg) scale(0.1);-moz-transform:rotate(-60deg) scale(0.1);-o-transform:rotate(-60deg) scale(0.1);-ms-transform:rotate(-60deg) scale(0.1);opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;}
50%{transform:rotate(60deg) scale(0.5);-webkit-transform:rotate(60deg) scale(0.5);-moz-transform:rotate(60deg) scale(0.5);-o-transform:rotate(60deg) scale(0.5);-ms-transform:rotate(60deg) scale(0.5);opacity:.7;-webkit-opacity:.7;-moz-opacity:.7;}
100%{transform:none;-webkit-transform:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.dance{-webkit-animation-name:dance;-moz-animation-name:dance;-o-animation-name:dance;animation-name:dance;}
CSS代码(live-preview.css):
@charset "utf-8";.live{position:relative;width:80%;height:120px;padding:30px 10px 20px 30px;}
.live h3,.live h4,.live h5{font-family:'exodemi_bold',Geneva,sans-serif;}
.live h3{font-size:32px;text-transform:uppercase;color:#00BFFF;}
.live h4{font-size:22px;color:#999999;}
.live h5{font-size:16px;color:#CCCCCC;line-height:26px;}
@media screen and (min-width:0px) and (max-width:800px){.live h3,.live h4,.live h5{display:none;}
}
分享到QQ
分享到微博
微信扫一扫
