参考：http://www.w3cfuns.com/blog-5458245-5406333.html
<div class="main">
<div class="content">
<div id="animate" class="FadeIn">
Animator
</div>
<div class="codecase">
<link rel='stylesheet' type='text/css' href='http://tool.oschina.net/js/syntaxhighlighter_3.0.83/styles/shCoreEclipse.css'/><div id="highlighter_138823" class="syntaxhighlighter xml"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml comments"><!--include animator--></code></div><div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">link</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://animator.ringotc.net/style/animator.min.css">http://animator.ringotc.net/style/animator.min.css</a>"</code><code class="xml plain">/></code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string" id="ClassName">"FadeIn"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"logo"</code><code class="xml plain">>Animator</</code><code class="xml keyword">div</code><code class="xml plain">></code></div></div></td></tr></tbody></table></div>
</div>
<div class="select">
<div class="option" tar="FadeIn" href="#">
<p>渐入</p>
</div>
<div class="option" tar="FadeInT" href="#">
<p>从上渐入</p>
</div>
<div class="option" tar="FadeInL" href="#">
<p>从左渐入</p>
</div>
<div class="option" tar="FadeInR" href="#">
<p>从右渐入</p>
</div>
<div class="option" tar="FadeOut" href="#">
<p>渐出</p>
</div>
<div class="option" tar="FadeOutT" href="#">
<p>从上渐出</p>
</div>
<div class="option" tar="FadeOutL" href="#">
<p>从左渐出</p>
</div>
<div class="option" tar="FadeOutR" href="#">
<p>从右渐出</p>
</div>
<div class="option" tar="FadeOutB" href="#">
<p>从下渐出</p>
</div>
<div class="option" tar="Bounce" href="#">
<p>弹跳</p>
</div>
<div class="option" tar="BounceIn" href="#">
<p>弹入</p>
</div>
<div class="option" tar="BounceInT" href="#">
<p>从上弹入</p>
</div>
<div class="option" tar="BounceInL" href="#">
<p>从左弹入</p>
</div>
<div class="option" tar="BounceInR" href="#">
<p>从右弹入</p>
</div>
<div class="option" tar="BounceInB" href="#">
<p>从下弹入</p>
</div>
<div class="option" tar="BounceOut" href="#">
<p>弹出</p>
</div>
<div class="option" tar="BounceOutT" href="#">
<p>从上弹出</p>
</div>
<div class="option" tar="BounceOutL" href="#">
<p>从左弹出</p>
</div>
<div class="option" tar="BounceOutR" href="#">
<p>从右弹出</p>
</div>
<div class="option" tar="BounceOutB" href="#">
<p>从下弹出</p>
</div>
<div class="option" tar="Flip" href="#">
<p>翻转</p>
</div>
<div class="option" tar="FlipInx" href="#">
<p>沿X轴翻入</p>
</div>
<div class="option" tar="FlipInY" href="#">
<p>沿Y轴翻入</p>
</div>
<div class="option" tar="FlipOutx" href="#">
<p>沿X轴翻出</p>
</div>
<div class="option" tar="FlipOutY" href="#">
<p>沿Y轴翻出</p>
</div>
<div class="option" tar="Flash" href="#">
<p>闪烁</p>
</div>
<div class="option" tar="Shake" href="#">
<p>摇晃</p>
</div>
<div class="option" tar="Wobble" href="#">
<p>摇曳</p>
</div>
<div class="option" tar="Tada" href="#">
<p>响铃</p>
</div>
<div class="option" tar="RubberBand" href="#">
<p>橡皮筋</p>
</div>
<div class="option" tar="LightSpeedIn" href="#">
<p>滑入</p>
</div>
<div class="option" tar="LightSpeedOut" href="#">
<p>滑出</p>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
body{
background:#eee;
overflow:hidden;
}
.content{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
text-align:center;
}
#animate{
margin-top:10%;
font-size:70px;
}
.codecase{
width:60%;
overflow:hidden;
margin:0 auto;
}
#ClassName{
font-weight:bold!important;
}
.select{
width:90%;
text-align:center;
margin:0 auto;
}
.option{
cursor: pointer;
background: none repeat scroll 0% 0% #2098D1;
text-decoration: none;
color: #ccc;
float:left;
font-size:14px;
width:8%;
padding:2%;
overflow:hidden;
margin:2px;
}
.option:hover{
color:#fff;
background:#034060;
}
.photo{
position:fixed;
right:10px;
top:10px;
}
.photo img{
width:100px;
height:100px;
border-radius:50%;
border:10px solid #ccc;
}
.Bounce,.Flip,.Flash,.Shake,.Wobble,.Tada,.RubberBand,.Swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.BounceIn,.BounceInT,.BounceInL,.BounceInR,.BounceInB,.FadeIn,.FadeInT,.FadeInL,.FadeInR,.FadeInB,.Flip,.FlipInX,.FlipInY,.LightSpeedIn{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
.BounceOutT,.BounceOutL,.BounceOutR,.BounceOutB,.FadeOut,.FadeOutT,.FadeOutL,.FadeOutR,.FadeOutB,.BounceOut,.FlipOutX,.FlipOutY,.LightSpeedOut{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
.Bounce{-webkit-animation-name:Bounce;-moz-animation-name:Bounce;-ms-animation-name:Bounce;animation-name:Bounce;}
.BounceIn{-webkit-animation-name:BounceIn;-moz-animation-name:BounceIn;-ms-animation-name:BounceIn;animation-name:BounceIn;}
.BounceInT{-webkit-animation-name:BounceInT;-moz-animation-name:BounceInT;-ms-animation-name:BounceInT;animation-name:BounceInT;}
.BounceInL{-webkit-animation-name:BounceInL;-moz-animation-name:BounceInL;-ms-animation-name:BounceInL;animation-name:BounceInL;}
.BounceInR{-webkit-animation-name:BounceInR;-moz-animation-name:BounceInR;-ms-animation-name:BounceInR;animation-name:BounceInR;}
.BounceInB{-webkit-animation-name:BounceInB;-moz-animation-name:BounceInB;-ms-animation-name:BounceInB;animation-name:BounceInB;}
.BounceOut{-webkit-animation-name:BounceOut;-moz-animation-name:BounceOut;-ms-animation-name:BounceOut;animation-name:BounceOut;}
.BounceOutT{-webkit-animation-name:BounceOutT;-moz-animation-name:BounceOutT;-ms-animation-name:BounceOutT;animation-name:BounceOutT;}
.BounceOutL{-webkit-animation-name:BounceOutL;-moz-animation-name:BounceOutL;-ms-animation-name:BounceOutL;animation-name:BounceOutL;}
.BounceOutR{-webkit-animation-name:BounceOutR;-moz-animation-name:BounceOutR;-ms-animation-name:BounceOutR;animation-name:BounceOutR;}
.BounceOutB{-webkit-animation-name:BounceOutB;-moz-animation-name:BounceOutB;-ms-animation-name:BounceOutB;animation-name:BounceOutB;}
.FadeIn{-webkit-animation-name:FadeIn;-moz-animation-name:FadeIn;-ms-animation-name:FadeIn;animation-name:FadeIn;}
.FadeInT{-webkit-animation-name:FadeInT;-moz-animation-name:FadeInT;-ms-animation-name:FadeInT;animation-name:FadeInT;}
.FadeInL{-webkit-animation-name:FadeInL;-moz-animation-name:FadeInL;-ms-animation-name:FadeInL;animation-name:FadeInL;}
.FadeInR{-webkit-animation-name:FadeInR;-moz-animation-name:FadeInR;-ms-animation-name:FadeInR;animation-name:FadeInR;}
.FadeInB{-webkit-animation-name:FadeInB;-moz-animation-name:FadeInB;-ms-animation-name:FadeInB;animation-name:FadeInB;}
.FadeOut{-webkit-animation-name:FadeOut;-moz-animation-name:FadeOut;-ms-animation-name:FadeOut;animation-name:FadeOut;}
.FadeOutT{-webkit-animation-name:FadeOutT;-moz-animation-name:FadeOutT;-ms-animation-name:FadeOutT;animation-name:FadeOutT;}
.FadeOutL{-webkit-animation-name:FadeOutL;-moz-animation-name:FadeOutL;-ms-animation-name:FadeOutL;animation-name:FadeOutL;}
.FadeOutR{-webkit-animation-name:FadeOutR;-moz-animation-name:FadeOutR;-ms-animation-name:FadeOutR;animation-name:FadeOutR;}
.FadeOutB{-webkit-animation-name:FadeOutB;-moz-animation-name:FadeOutB;-ms-animation-name:FadeOutB;animation-name:FadeOutB;}
.Flip{-webkit-animation-name:Flip;-moz-animation-name:Flip;-ms-animation-name:Flip;animation-name:Flip;}
.FlipInX{-webkit-animation-name:FlipInX;-moz-animation-name:FlipInX;-ms-animation-name:FlipInX;animation-name:FlipInX;}
.FlipInY{-webkit-animation-name:FlipInY;-moz-animation-name:FlipInY;-ms-animation-name:FlipInY;animation-name:FlipInY;}
.FlipOutX{-webkit-animation-name:FlipOutX;-moz-animation-name:FlipOutX;-ms-animation-name:FlipOutX;animation-name:FlipOutX;}
.FlipOut,.FlipOutY{-webkit-animation-name:FlipOutY;-moz-animation-name:FlipOutY;-ms-animation-name:FlipOutY;animation-name:FlipOutY;}
.Flash{-webkit-animation-name:Flash;-moz-animation-name:Flash;-ms-animation-name:Flash;animation-name:Flash;}
.Shake{-webkit-animation-name:Shake;-moz-animation-name:Shake;-ms-animation-name:Shake;animation-name:Shake;}
.Swing{-webkit-animation-name:Swing;-moz-animation-name:Swing;-ms-animation-name:swing;animation-name:Swing;}
.Wobble{-webkit-animation-name:Wobble;-moz-animation-name:Wobble;-ms-animation-name:Wobble;animation-name:Wobble;}
.Tada{-webkit-animation-name:Tada;-moz-animation-name:Tada;-ms-animation-name:Tada;animation-name:Tada;}
.RubberBand{-webkit-animation-name:RubberBand;-moz-animation-name:RubberBand;-ms-animation-name:RubberBand;animation-name:RubberBand;}
.LightSpeedIn{-webkit-animation-name:LightSpeedIn;-moz-animation-name:LightSpeedIn;-ms-animation-name:LightSpeedIn;animation-name:LightSpeedIn;}
.LightSpeedOut{-webkit-animation-name:LightSpeedOut;-moz-animation-name:LightSpeedOut;-ms-animation-name:LightSpeedOut;animation-name:LightSpeedOut;}
@-webkit-keyframes RubberBand{
0%{-webkit-transform:scale(1);transform:scale(1);}
30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
@-moz-keyframes RubberBand{
0%{-moz-transform:scale(1);transform:scale(1);}
30%{-moz-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-moz-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-moz-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-moz-transform:scale(1);transform:scale(1);}
}
@-ms-keyframes RubberBand{
0%{-ms-transform:scale(1);transform:scale(1);}
30%{-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-ms-transform:scale(1);transform:scale(1);}
}
@keyframes RubberBand{
0%{transform:scale(1);transform:scale(1);}
30%{transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{transform:scale(1);transform:scale(1);}
}
@-webkit-keyframes LightSpeedIn{
0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-ms-keyframes LightSpeedIn{
0%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-moz-keyframes LightSpeedIn{
0%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-moz-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-moz-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}
@keyframes LightSpeedIn{
0%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}
@-webkit-keyframes LightSpeedOut{
0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@-moz-keyframes LightSpeedOut{
0%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@-ms-keyframes LightSpeedOut{
0%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@keyframes LightSpeedOut{0%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@-webkit-keyframes Bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}}
@-moz-keyframes Bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}}
@-ms-keyframes Bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
40%{-ms-transform:translateY(-30px);}
60%{-ms-transform:translateY(-15px);}}
@keyframes Bounce{0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}
@-webkit-keyframes BounceIn{0%{opacity:0;-webkit-transform:scale(0.3);}
50%{opacity:1;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(0.9);}100%{-webkit-transform:scale(1);}}
@-moz-keyframes BounceIn{0%{opacity:0;-moz-transform:scale(0.3);}
50%{opacity:1;-moz-transform:scale(1.05);}
70%{-moz-transform:scale(0.9);}
100%{-moz-transform:scale(1);}}
@-ms-keyframes BounceIn{0%{opacity:0;-ms-transform:scale(0.3);}
50%{opacity:1;-ms-transform:scale(1.05);}
70%{-ms-transform:scale(0.9);}100%{-ms-transform:scale(1);}}
@keyframes BounceIn{0%{opacity:0;transform:scale(0.3);}
50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}
100%{transform:scale(1);}}
@-webkit-keyframes BounceInT{0%{opacity:0;-webkit-transform:translateY(-100px);}
50%{opacity:1;-webkit-transform:translateY(30px);}70%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0px);}}
@-moz-keyframes BounceInT{0%{opacity:0;-moz-transform:translateY(-100px);}60%{opacity:1;-moz-transform:translateY(30px);}80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}}
@-ms-keyframes BounceInT{0%{opacity:0;-ms-transform:translateY(-100px);}60%{opacity:1;-ms-transform:translateY(30px);}80%{-ms-transform:translateY(-10px);}100%{-ms-transform:translateY(0);}}
@keyframes BounceInT{0%{opacity:0;transform:translateY(-100px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}}
@-webkit-keyframes BounceInR{0%{opacity:0;-webkit-transform:translateX(100px);}60%{opacity:1;-webkit-transform:translateX(-30px);}80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}}
@-moz-keyframes BounceInR{0%{opacity:0;-moz-transform:translateX(100px);}60%{opacity:1;-moz-transform:translateX(-30px);}80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}}
@-ms-keyframes BounceInR{0%{opacity:0;-ms-transform:translateX(100px);}60%{opacity:1;-ms-transform:translateX(-30px);}80%{-ms-transform:translateX(10px);}100%{-ms-transform:translateX(0);}}
@keyframes BounceInR{0%{opacity:0;transform:translateX(100px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}
@-webkit-keyframes BounceInL{0%{opacity:0;-webkit-transform:translateX(-100px);}60%{opacity:1;-webkit-transform:translateX(30px);}80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}}
@-moz-keyframes BounceInL{0%{opacity:0;-moz-transform:translateX(-100px);}60%{opacity:1;-moz-transform:translateX(30px);}80%{-moz-transform:translateX(-10px);}100%{-moz-transform:translateX(0);}}
@-ms-keyframes BounceInL{0%{opacity:0;-ms-transform:translateX(-100px);}60%{opacity:1;-ms-transform:translateX(30px);}80%{-ms-transform:translateX(-10px);}100%{-ms-transform:translateX(0);}}
@keyframes BounceInL{0%{opacity:0;transform:translateX(-100px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}}
@-webkit-keyframes BounceInB{0%{opacity:0;-webkit-transform:translateY(100px);}60%{opacity:1;-webkit-transform:translateY(-30px);}80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}
@-moz-keyframes BounceInB{0%{opacity:0;-moz-transform:translateY(100px);}60%{opacity:1;-moz-transform:translateY(-30px);}80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}}
@-ms-keyframes BounceInB{0%{opacity:0;-ms-transform:translateY(100px);}60%{opacity:1;-ms-transform:translateY(-30px);}80%{-ms-transform:translateY(10px);}100%{-ms-transform:translateY(0);}}
@keyframes BounceInB{0%{opacity:0;transform:translateY(100px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}}
@-webkit-keyframes BounceOut{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(0.9);}70%{opacity:1;-webkit-transform:scale(1.05);}100%{opacity:0;-webkit-transform:scale(0.3);}}
@-moz-keyframes BounceOut{0%{-moz-transform:scale(1);}50%{-moz-transform:scale(0.9);}70%{opacity:1;-moz-transform:scale(1.05);}100%{opacity:0;-moz-transform:scale(0.3);}}
@-ms-keyframes BounceOut{0%{-ms-transform:scale(1);}50%{-ms-transform:scale(0.9);}70%{opacity:1;-ms-transform:scale(1.05);}100%{opacity:0;-ms-transform:scale(0.3);}}
@keyframes BounceOut{0%{transform:scale(1);}50%{transform:scale(0.9);}70%{opacity:1;transform:scale(1.05);}100%{opacity:0;transform:scale(0.3);}}
@-webkit-keyframes BounceOutT{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);}100%{opacity:0;-webkit-transform:translateY(-100px);}}
@-moz-keyframes BounceOutT{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-100px);}}
@-ms-keyframes BounceOutT{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(20px);}100%{opacity:0;-ms-transform:translateY(-100px);}}
@keyframes BounceOutT{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-100px);}}
@-webkit-keyframes BounceOutR{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);}100%{opacity:0;-webkit-transform:translateX(100px);}}
@-moz-keyframes BounceOutR{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(100px);}}
@-ms-keyframes BounceOutR{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(-20px);}100%{opacity:0;-ms-transform:translateX(100px);}}
@keyframes BounceOutR{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(100px);}}
@-webkit-keyframes BounceOutL{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);}100%{opacity:0;-webkit-transform:translateX(-100px);}}
@-moz-keyframes BounceOutL{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-100px);}}
@-ms-keyframes BounceOutL{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(20px);}100%{opacity:0;-ms-transform:translateX(-100px);}}
@keyframes BounceOutL{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(20px);}100%{opacity:0;transform:translateX(-200px);}}
@-webkit-keyframes BounceOutB{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);}100%{opacity:0;-webkit-transform:translateY(100px);}}
@-moz-keyframes BounceOutB{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(100px);}}
@-ms-keyframes BounceOutB{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(-20px);}100%{opacity:0;-ms-transform:translateY(100px);}}
@keyframes BounceOutB{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(100px);}}
@-webkit-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@-ms-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes FadeInT{0%{opacity:0;-webkit-transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes FadeInT{0%{opacity:0;-moz-transform:translateY(-100px);}100%{opacity:1;-moz-transform:translateY(0);}}
@-ms-keyframes FadeInT{0%{opacity:0;-ms-transform:translateY(-100px);}100%{opacity:1;-ms-transform:translateY(0);}}
@keyframes FadeInT{0%{opacity:0;transform:translateY(-100px);}100%{opacity:1;transform:translateY(0);}}
@-webkit-keyframes FadeInL{0%{opacity:0;-webkit-transform:translateX(-100px);}100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes FadeInL{0%{opacity:0;-moz-transform:translateX(-100px);}
100%{opacity:1;-moz-transform:translateX(0);}}
@-ms-keyframes FadeInL{0%{opacity:0;-ms-transform:translateX(-100px);}100%{opacity:1;-ms-transform:translateX(0);}}
@keyframes FadeInL{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}}
@-webkit-keyframes FadeInR{0%{opacity:0;-webkit-transform:translateX(100px);}100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes FadeInR{0%{opacity:0;-moz-transform:translateX(100px);}100%{opacity:1;-moz-transform:translateX(0);}}
@-ms-keyframes FadeInR{0%{opacity:0;-ms-transform:translateX(100px);}100%{opacity:1;-ms-transform:translateX(0);}}
@keyframes FadeInR{0%{opacity:0;transform:translateX(100px);}100%{opacity:1;transform:translateX(0);}}
@-webkit-keyframes FadeInB{0%{opacity:0;-webkit-transform:translateY(100px);}100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes FadeInB{0%{opacity:0;-moz-transform:translateY(100px);}100%{opacity:1;-moz-transform:translateY(0);}}
@-ms-keyframes FadeInB{0%{opacity:0;-ms-transform:translateY(100px);}100%{opacity:1;-ms-transform:translateY(0);}}
@keyframes FadeInB{0%{opacity:0;transform:translateY(100px);}100%{opacity:1;transform:translateY(0);}}
@-webkit-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@-moz-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@-ms-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@-webkit-keyframes FadeOutT{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-100px);}}
@-moz-keyframes FadeOutT{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-100px);}}
@-ms-keyframes FadeOutT{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(-100px);}}
@keyframes FadeOutT{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-100px);}}
@-webkit-keyframes FadeOutL{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-100px);}}
@-moz-keyframes FadeOutL{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-100px);}}
@-ms-keyframes FadeOutL{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(-100px);}}
@keyframes FadeOutL{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-100px);}}
@-webkit-keyframes FadeOutR{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(100px);}}
@-moz-keyframes FadeOutR{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(100px);}}
@-ms-keyframes FadeOutR{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(100px);}}
@keyframes FadeOutR{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100px);}}
@-webkit-keyframes FadeOutB{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(100px);}}
@-moz-keyframes FadeOutB{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(100px);}}
@-ms-keyframes FadeOutB{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(100px);}}
@keyframes FadeOutB{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(100px);}}
@-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(0.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}}
@-moz-keyframes Flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}}
@-ms-keyframes Flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}100%{-ms-transform:perspective(400px) scale(1);-ms-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(0.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}}
@-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(0);opacity:1;}}
@-moz-keyframes FlipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}}
@-ms-keyframes FlipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateX(-10deg);}
70%{-ms-transform:perspective(400px) rotateX(10deg);}
100%{-ms-transform:perspective(400px) rotateX(0);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(0);opacity:1;}}
@-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(0);opacity:1;}}
@-moz-keyframes FlipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateY(-10deg);}
70%{-moz-transform:perspective(400px) rotateY(10deg);}
100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}}
@-ms-keyframes FlipInY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateY(-10deg);}
70%{-ms-transform:perspective(400px) rotateY(10deg);}
100%{-ms-transform:perspective(400px) rotateY(0);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(0);opacity:1;}}
@-webkit-keyframes FlipOutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@-moz-keyframes FlipOutX{0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@-ms-keyframes FlipOutX{0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@keyframes FlipOutX{0%{transform:perspective(400px) rotateX(0);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}}
@-webkit-keyframes FlipOutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@-moz-keyframes FlipOutY{0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@-ms-keyframes FlipOutY{0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@keyframes FlipOutY{0%{transform:perspective(400px) rotateY(0);opacity:1;}
100%{transform:perspective(400px) rotateY(90deg);opacity:0;}}
@-webkit-keyframes Flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
@-moz-keyframes Flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
@-ms-keyframes Flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
@keyframes Flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
@-webkit-keyframes Tada{0%{-webkit-transform:scale(1);transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}}
@-moz-keyframes Tada{0%{-moz-transform:scale(1);transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}}
@-ms-keyframes Tada{0%{-ms-transform:scale(1);transform:scale(1);}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}}
@keyframes Tada{0%{transform:scale(1);transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0);}}
@-webkit-keyframes Shake{0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}}
@-moz-keyframes Shake{0%,100%{-moz-transform:translateX(0);}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
20%,40%,60%,80%{-moz-transform:translateX(10px);}}
@-ms-keyframes Shake{0%,100%{-ms-transform:translateX(0);}
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
20%,40%,60%,80%{-ms-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);}}
@-webkit-keyframes Wobble{0%{-webkit-transform:translateX(0);}
15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
30%{-webkit-transform:translateX(80px) rotate(3deg);}
45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
60%{-webkit-transform:translateX(40px) rotate(2deg);}
75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
100%{-webkit-transform:translateX(0);}}
@-moz-keyframes Wobble{0%{-moz-transform:translateX(0);}
15%{-moz-transform:translateX(-100px) rotate(-5deg);}
30%{-moz-transform:translateX(80px) rotate(3deg);}
45%{-moz-transform:translateX(-65px) rotate(-3deg);}
60%{-moz-transform:translateX(40px) rotate(2deg);}
75%{-moz-transform:translateX(-20px) rotate(-1deg);}
100%{-moz-transform:translateX(0);}}
@-ms-keyframes Wobble{0%{-ms-transform:translateX(0);}
15%{-ms-transform:translateX(-100px) rotate(-5deg);}
30%{-ms-transform:translateX(80px) rotate(3deg);}
45%{-ms-transform:translateX(-65px) rotate(-3deg);}
60%{-ms-transform:translateX(40px) rotate(2deg);}
75%{-ms-transform:translateX(-20px) rotate(-1deg);}
100%{-ms-transform:translateX(0);}}
@keyframes Wobble{0%{transform:translateX(0);}
15%{transform:translateX(-100px) rotate(-5deg);}
30%{transform:translateX(80px) rotate(3deg);}
45%{transform:translateX(-65px) rotate(-3deg);}
60%{transform:translateX(40px) rotate(2deg);}
75%{transform:translateX(-20px) rotate(-1deg);}
100%{transform:translateX(0);}}
</style>
<script>
~function() {
var animate = $("#animate"), classname = $("#ClassName");
$(".option").click(function() {
var tar = $(this).attr("tar");
$(animate).removeClass();
$(animate).addClass(tar);
$(classname).html('"' + tar + '"');
});
}();
</script>
相关推荐
从脚本中将任意数量CSS动画一起排序是很容易发生的。 需要为CSS属性添加前缀，在样式表中首先配置过渡和关键帧，必须为动画/过渡结束设置侦听器-这个过程很容易陷入嵌套的回调意大利面条-加上许多其他可以使整个...
空安全性： 为了获得零安全，请使用flutter_animator：^ 3.1.0，而没有null安全：flutter_animator：2.1.0 部分受到Dan Eden令人惊奇的软件包的启发。 请注意，尽管它受到Animate.css的启发，但它仍然是Flutter...
Animator：一个小型高性能动画库，提供基于promise的API
动画师 受到优雅的启发，Animator是一个干净命名空间的ActiveRecord插件，可插入到现有模型生命周期中，从而允许恢复（ Animable#reanimate ）和查询（ Animable.inanimate ）被破坏的对象，包括没有默认值的...
animator.js 一个JavaScript / CSS动画库。 在此处阅读有关内容： :
该库是Flutter的动画库，该库： 借助Animator小部件，使动画像Flutter中最简单的小部件一样简单， 允许您控制（向前，停止，反向），重新配置，重置和重新启动按钮或事件回调中的动画。 动画师： 使用一个小部件...
精灵动画 安装 $ npm install spritesheet-animator 用法 var dataFile = JSON.parse(fs.readFileSync(__dirname + '/particle_hover.json', 'utf8')); this.spriteAnimation = new SpritesheetAnimator(); this....
css-animator, 使用支持 Angular的CSS类对元素进行动画处理 css动画在 animate.css 库中使用CSS动画，在没有可用的动画生成器的情况下，这个包是created的。CSS动画程序适用于任何JavaScript应用程序，并且不需要...
动画动画师 入门 如果您只是想让代码尽快运行，而无需在计算机上进行任何设置，请。 如果您希望设置本地开发环境，请克隆存储库： git clone https://github.com/wokwi/wokwi-animator 然后运行npm install安装...
Animator（参数动画）是一个专门用于SketchUp模型动画的插件，通过参数化的交互式框架来控制对象和相机沿时间轴的移动。获取生成高质量视频外部工具FFmpeg，可以到免费SU插件下载网站-SU插件百科：...
该款软件基于GUI编辑，为RIA应用程序提供widget，生成可以和所有JS库写作的CSS3动画代码，新版本带来了三个新的编辑器，是目前最好用的图形化CSS3动画设计器。有需要的朋友不妨下载试试！ 软件功能 1、全方位的...
块动画师Minecraft Mod，动画化块的外观此Repo不再维护，继续进行开发。
GPX动画师 介绍 GPX Animator从大多数标准GPS跟踪设备生成的一个或多个GPX文件生成自顶向下的视图地图视频。 GPX Animator具有可在大多数操作系统上运行的图形用户界面，但也可以使用纯命令行界面。 有关更多信息...
船动画师 一个免费的定格动画程序，使用Electron为Windows，macOS和Linux创建...可以从GitHub存储库的下载Boats Animator。 贡献 有关对Boats Animator进行贡献的更多信息，请参见 。 执照 Boats Animator已根据许可。
Animator是一个方便的网络应用程序，它可以帮助想要使用Sprite工作表快速预览动画序列的任何人。 确实没什么，您只需将图像拖放到巨大的灰色框中，然后设置X和Y方向上的帧数，每帧之间的时间（以毫秒为单位），...
属性动画师 对象动画器、值动画器
动画师一个简单的像素动画制作器来导出动画GIF 去做： 允许使用选择网格和像素大小
Ulead GIF Animator 5教程8动画制作实例
Ease Curves :控制动画的速度，在特定的停止点的动画。 Events"将事件添加到其他对象的路径，或者可以调用其他对象，或广播事件; Orientations :通过路径控制摄像头的方向，只用于自定义动画模式。 Tilts:控制摄像机...
一个漂亮JavaScript库，用于在您的dom的注释中显示小型ASCII动画。 对于任何检查您的代码的人来说，这都是一个复活节彩蛋。 仅此而已。 指示 dom-animator.js是一个独立的库（没有jQuery等），因此用法非常简单。 ...