参考：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...
2. **动画属性**：CSS3提供了几个属性来控制动画的行为，包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`...
总结，animator.js是一个强大且灵活的JavaScript/CSS动画库，它简化了网页动画的创建过程，让开发者能够专注于创意设计，而不必过于关心动画的实现细节。通过深入理解和熟练运用animator.js，我们可以为用户创造更加...
动画师 受到优雅的启发，Animator是一个干净命名空间的ActiveRecord插件，可插入到现有模型生命周期中，从而允许恢复（ Animable#reanimate ）和查询（ Animable.inanimate ）被破坏的对象，包括没有默认值的...
"PropertyAnimator:对象动画器、值动画器"这个主题主要关注的是Android中的两种动画机制——Property Animator（对象动画器）和Value Animator（值动画器）。这两种动画机制是Java API的一部分，允许开发者创建丰富...
Animator库的高性能主要来自于对浏览器原生CSS动画的利用。它可能通过修改CSS属性并利用浏览器的硬件加速来实现平滑的动画效果。此外， Animator可能还支持时间函数（如linear, ease-in, ease-out, ease-in-out等）...
该库是Flutter的动画库，该库： 借助Animator小部件，使动画像Flutter中最简单的小部件一样简单， 允许您控制（向前，停止，反向），重新配置，重置和重新启动按钮或事件回调中的动画。 动画师： 使用一个小部件...
3. **动画逻辑**：动画效果的实现可能基于游戏的时间、玩家的行为或其他环境因素。这可能包括定时器、状态判断和渲染更新等功能。 4. **事件处理**：Minecraft模组开发中，事件处理是常用的技术，用于在特定游戏...
- **预设动画库**：Text Animator包含了一系列预设的动画效果，如淡入淡出、飞入飞出、旋转、缩放等，开发者可以直接应用这些预设，快速实现动画效果。 - **自定义动画**：除了预设的动画，用户还可以创建自己的...
精灵动画 安装 $ npm install spritesheet-animator 用法 var dataFile = JSON.parse(fs.readFileSync(__dirname + '/particle_hover.json', 'utf8')); this.spriteAnimation = new SpritesheetAnimator(); this....
Animator（参数动画）是一个专门用于SketchUp模型动画的插件，通过参数化的交互式框架来控制对象和相机沿时间轴的移动。获取生成高质量视频外部工具FFmpeg，可以到免费SU插件下载网站-SU插件百科：...
css-animator, 使用支持 Angular的CSS类对元素进行动画处理 css动画在 animate.css 库中使用CSS动画，在没有可用的动画生成器的情况下，这个包是created的。CSS动画程序适用于任何JavaScript应用程序，并且不需要...
标题中的"animator: Pixel Animator导出为GIF动画"是指一个用于创建像素动画并将其导出为GIF格式的应用程序或工具。这个工具可能是基于JavaScript编程语言开发的，因为标签中提到了"JavaScript"。JavaScript是一种...
该款软件基于GUI编辑，为RIA应用程序提供widget，生成可以和所有JS库写作的CSS3动画代码，新版本带来了三个新的编辑器，是目前最好用的图形化CSS3动画设计器。有需要的朋友不妨下载试试！ 软件功能 1、全方位的...
动画动画师 入门 如果您只是想让代码尽快运行，而无需在计算机上进行任何设置，请。 如果您希望设置本地开发环境，请克隆存储库： git clone https://github.com/wokwi/wokwi-animator 然后运行npm install安装...
船动画师 一个免费的定格动画程序，使用Electron为Windows，macOS和Linux创建...可以从GitHub存储库的下载Boats Animator。 贡献 有关对Boats Animator进行贡献的更多信息，请参见 。 执照 Boats Animator已根据许可。
GPX动画师 介绍 GPX Animator从大多数标准GPS跟踪设备生成的一个或多个GPX文件生成自顶向下的视图地图视频。 GPX Animator具有可在大多数操作系统上运行的图形用户界面，但也可以使用纯命令行界面。 有关更多信息...
Animator是一个方便的网络应用程序，它可以帮助想要使用Sprite工作表快速预览动画序列的任何人。 确实没什么，您只需将图像拖放到巨大的灰色框中，然后设置X和Y方向上的帧数，每帧之间的时间（以毫秒为单位），...
《3D Flash Animator 4.9：开启三维动画创作之旅》 3D Flash Animator是一款专为用户打造的高效、易用的3D动画制作软件，它以其强大的功能和直观的操作界面，深受广大动画制作者的喜爱。这款软件的核心在于提供了一...