-webkit-transition (不支持IE) 使得网页变化不那么生硬
2013-12-12 13:45:34 来源： 浏览： 次
导读：
div { width: 200px; }
h2 { font: 400 40px 1 5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }
ul {
<style type="text/css">
div { width: 200px; }
h2 { font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }
ul { list-style-type: none; margin: 0; padding: 0; }
li { font: 200 20px/1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; }
li:last-child { border: none; }
li a {
text-decoration: none; color: #000; display: block; width: 200px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
}
li a:hover { font-size: 30px; background: #f6f6f6; }
</style>
<div>
<h2>HelvetiList</h2>
<ul>
<li><a href=<"#"<>Zurich</a></li>
<li><a href=<"#"<>Geneva</a></li>
<li><a href=<"#"<>Winterthur</a></li>
<li><a href=<"#"<>Lausanne</a></li>
<li><a href=<"#"<>Lucerne</a></li>
</ul>
</div>
ps：这个属性可以分解成多个CSS属性：（1)-webkit-transition-timing-function 可以定义动画的变化时间曲线
-webkit-transition-timing-function: ease-out ,cubic-bezier(x1,y1,x2,y2);
（2）-webkit-transition-property指定发生变化的属性
-webkit-transition-property: opacity;
（3）-webkit-transition-duration制定发生变化的时间
-webkit-transition-duration: 2s;
-webkit-transition-delay 指定在变换开始之前的时间延迟
-webkit-transition: opacity 500ms ease-out 100ms;
（4）同时也可以使用全部的写法：例如
transition:.2s ease-in-out;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition: all 0.2s ease-out;