过度代码
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <meta charset="UTF-8"> <meta name="Author" content="haley"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>CSS3 过渡 transition</title> <style> div.ra { 100px; height:100px; background:#00AEEF; transition:all 2s; -moz-transition:all 2s; /* Firefox 4 */ -webkit-transition: all 2s; /* Safari and Chrome */ -o-transition: all 2s;/* Opera */ } div.ra:hover { height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); 300px; background:#0000ff; color:#fff; } table{ border-collapse: collapse;border-spacing: 0; } table td,table th{ border: 1px solid #333; text-align: center; vertical-align:middle; height: 30px; line-height: 30px;; } </style> </head> <body> <div class="ra">div里面的内容</div> <div> <ul> <li>transition的属性可以是尺寸、颜色、动画</li> <li>时间曲线transition-timing-function： <table> <thead> <tr><th>值</th><th>描述</th></tr> </thead> <tbody> <tr><td>linear</td><td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td></tr> <tr><td>ease</td><td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td></tr> <tr><td>ease-in</td><td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td></tr> <tr><td>ease-out</td><td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td></tr> <tr><td>ease-in-out</td><td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td></tr> <tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td></tr> </tbody> </table> </li> <li><a href="http://www.runoob.com/cssref/css3-pr-transition-timing-function.html">更多资料</a></li> </ul> </div> </body> </html>