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