1.css的transition。 语法: transition: property duration timing-function delay; property:填写需要变化的css属性如:width,line-height,font-size,color等;登入後複製 duration:完成过渡效果需要的时间(2s 或者2000ms)登入後複製 timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)登入後複製 值 描述 linear 匀速(等于 cubic-bezier(0,0,1,1))。 ease 从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))。 ease-in 慢慢变快(等于 cubic-bezier(0.42,0,1,1))。 ease-out 慢慢变慢(等于 cubic-bezier(0,0,0.58,1))。 ease-in-out 先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1))。渐显渐隐效果 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 timing-delay:动画效果的延迟触发时间(2s 或者2000ms)。默认值分别为:all 0 ease 0登入後複製 transition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。 这种动画方式是css3的,因此ie9以下是不支持的,其他的浏览器需要加前缀,并且只有两态,不支持自定义中间的状态。 例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <code class="css string" style="background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:blue!important">"text/css"</code><code class="css plain" style="background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important">></code></p> <p class="line number2 index1 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>p</code></p> <p class="line number3 index2 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>{</code></p> <p class="line number4 index3 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css keyword" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important'>width</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>:</code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>100px</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>;</code></p> <p class="line number5 index4 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css keyword" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important'>height</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>:</code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>100px</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>;</code></p> <p class="line number6 index5 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css keyword" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important'>background</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>:</code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>red</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>;</code></p> <p class="line number7 index6 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>transition:width </code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>2</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>s;</code></p> <p class="line number8 index7 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>-moz-transition:width </code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>2</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>s; </code><code class="css comments" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,130,0)!important'>/* Firefox 4 */</code></p> <p class="line number9 index8 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>-webkit-transition:width </code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>2</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>s; </code><code class="css comments" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,130,0)!important'>/* Safari and Chrome */</code></p> <p class="line number10 index9 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>-o-transition:width </code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>2</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>s; </code><code class="css comments" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,130,0)!important'>/* Opera */</code></p> <p class="line number11 index10 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>}</code></p> <p class="line number12 index11 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css spaces" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'> </code> </p> <p class="line number13 index12 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>p:hover</code></p> <p class="line number14 index13 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>{</code></p> <p class="line number15 index14 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css keyword" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important'>width</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>:</code><code class="css value" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important; color:rgb(0,153,0)!important'>300px</code><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>;</code></p> <p class="line number16 index15 alt1" style="margin:0px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'>}</code></p> <p class="line number17 index16 alt2" style="margin:0px; background:none rgb(244,244,244)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:nowrap!important"><code class="css plain" style='background:none!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; min-height:auto!important'> tips:transform是一种变化属性,该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。 前缀: transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ 2.css3的animation属性 语法: animation: name duration timing-function delay iteration-count direction; name:keyframe的名称,也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。 duration:完成动画所需要的时间(2s 或者 2000ms) timing-function:完成动画的速度曲线 delay:动画开始之前的延迟iteration-count:动画播放次数 direction:是否轮流反向播放动画(normal:正常顺序播放,alternate下一次反向播放)如果把动画设置为只播放一次,则该属性没有效果。使用animation属性制作动画可以更加灵活的设置动画帧,通过不同keyframe(动画帧)的设置,实现很多优雅的效果,keyframe中的百分数是动画完成总时间的比例。 animation是设置总的动画效果,而keyframe中设置上相应的动画名字,然后在keyframe中设置具体的动画效果。当然由于是css3的属性,仍然需要注意它的兼容性,加上必须的前缀。例子:登入後複製 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 p { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { 1% {left:0px;} 20%{left:200px;} 50% {left:300px;} 100%{left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { 1% {left:0px;} 20%{left:200px;} 50% {left:300px;} 100%{left:200px;} } 3.Jquery的animate函数 语法: $(selector).animate(styles,options) styles:产生动画的css样式和值; options={ speed:动画的速度(可选参数:slow,normal,fase) easing:动画的速度函数(可选参数:swing,linear) callback:动画完成之后要执行的函数; queue:是否放置在效果队列中,是布尔值,为false则立即开始 specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}登入後複製 1 2 3 4 5 6 7 8 9 $(myElement).animate({ left: 500, top: 200 }, { duration:'3000', specialEasing: { left: 'swing', top: 'linear' } }); 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。登入後複製 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。 可以使用的属性有:(使用比如 "fontSize"来设置,而非 CSS 名称(比如 "font-size")) backgroundPosition,borderWidth,borderBottomWidth,borderLeftWidth borderRightWidth,borderTopWidth,borderSpacing margin,marginBottom,marginLeft,marginRight,marginTop outlineWidth padding,paddingBottom,paddingLeft,paddingRight,paddingTop height,width maxHeight,maxWidth,minHeight,minWidth font,fontSize bottom,left,right,top letterSpacing,wordSpacing,lineHeight,textIndent 可见通过jquery的animation生成动画的过程中可同时使用多个属性,也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=,如(height:'+=150px'),还可以使用队列机制进行步骤式的动画如: 1 2 3 4 p.animate({height:'300px',opacity:'0.4'},"slow"); p.animate({width:'3 00px',opacity:'0.8'},"slow"); p.animate({height:'100px',opacity:'0.4'},"slow"); p.animate({width:'100px',opacity:'0.8'},"slow");登入後複製 动画就会按照顺序一步一步实现,并且不用考虑兼容性,因为几乎都兼容。 但是,animate函数只能够实现一些数值属性,能够实现的变化非常有限制,而且使用这个函数时还要配合stop来使用,在达到某条件时终止动画,设置比较复杂。4.原生js动画 原生js动画利用js代码,将动画一步以函数的方式写出来,可以实现多种动画样式,而且可以自己做兼容性处理,自己设立每一步的动画效果,并且能够完成比较复杂的效果,但是代码量很大。如下面的例子:需要自己定义所有的动态函数,并进行计算、判断和处理 window.onload = function(){ var op = document.getElementById('op'); op.onmouseover = function(){ startMover(0); } op.onmouseout = function(){ startMover(-200); } } var timer = null; function startMover(a){//速度和目标值 clearInterval(timer);//执行当前动画同时清除之前的动画 var op = document.getElementById('op'); timer = setInterval(function(){ var speed = (a-op.offsetLeft)/10;//缓冲动画的速度参数变化值 //如果速度是大于0,说明是向右走,那么就向上取整 speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor();向下取整 if(op.offsetLeft == a){ clearInterval(timer); } else{ op.style.left = op.offsetLeft+speed+'px'; } },30); } 登入後複製 5.插件 网上可以搜到很多封装好的动画插件,这些插件可以直接引入到页面中,通过初试话和配置的方式进行设定,直接在页面中展示动画。 如:waves,textillate.js等等。 6.使用canvas制作动画 我们还可以使用canvas在浏览器上画图,并且利用其api,制作动画。canvas使用的地方非常多,尤其是在制作h5小游戏上。 同样都是使用编码的方式由前端开发工程师完成动画效果,canvas要比原生js效率高的多,流畅的多。通过画笔的方式,能够轻松的实现更多的动画效果。 至于canvas如何使用,请看我博客中正在连载的教程--html5 canvas常用api总结。 7.引用gif图片 如果在需求特别紧急,而且动画又特别复杂的情况下,自己没有把握按时实现效果,或者代价太大,真的,别犹豫,上gif图片吧,不要在技术上纠结了,虽然在工程师的角度上这样做很low,但是,用户的体验是没有影响的~所以,别纠结,就是要快!完成最重要了!