css3 的transition：允許css屬性值在一定的時間區內平滑的過渡。

transition-property：變換延續的時間

transition-duration：在延續時間段

transition-timing-function：變換速度變化

transition-delay：變化延遲時間

?

a：{all ?0.5s ?ease-in ?1s；}這里的四個值分別對應上面的四個屬性。

* {margin:0;padding:0;} ul{width:300px;} ul:after {clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;} ul li{list-style:none;font-size:12px;color:#069;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;width:280px;height:30px;margin-bottom:20px;} li a{position:relative;width:230px;height:30px;padding-left:25px;display:block;} li a img{position:absolute;top:6px;left:5px;border:0 none;display:block;} li a span, li a strong{position:absolute;top:0;left:25px;opacity:1; -webkit-transition:all 800ms linear; -moz-transition:all 800ms linear; -o-transition:all 800ms linear;line-height:30px;width:240px;} li a strong{top:30px;opacity:0;} li a:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;} li a:hover strong{top:0;opacity:1;} li a:hover span{top:-30px;opacity:0;}

?

　　

<div> <ul><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客1</span><strong>看看效果如何</strong></a></li><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客2</span><strong>看看效果如何</strong></a></li><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客3</span><strong>看看效果如何</strong></a></li> </ul> </div>

　　原理就是利用定位的相對a標簽的距離的不同，結合transition的平滑過渡，和顯示隱藏，實現動態的文字替換的過程。

轉載于:https://www.cnblogs.com/web-sheena/archive/2012/07/09/2582545.html

總結

以上是生活随笔為你收集整理的css3 transition的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。