-webkit-transition (不支持IE) 这个属性的作用是使得变化不那么生硬，达到比较平和的过渡

<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;