CSS3 动画系列3-transition（过渡） √
http://www.css88.com/archives/5403
如果丘处机没有路过牛家村，中国将是最发达国家
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style> .box1 { width: 100px; height: 100px; background: #F00; transition: width 2s, height 2s, background 2s; } .box1:hover { width: 200px; height: 50px; background: #FF0; } </style> </head> <body> <div class="box1">如果丘处机没有路过牛家村，中国将是最发达国家</div> </body> </html>
手机支付宝
http://qianbao.alipay.com/index.htm
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style> span { position: relative; color: navy; font-size: 100px; font-family: arial; opacity: 0; /* transition-property transition-duration transition-timing-function transition-delay */ -webkit-transition: all .8s ease .3s; -moz-transition: all .8s ease .3s; transition: all .8s ease .3s; } .word1 { left: -100px; } .word2{ left: 100px; } .anim-word1 { left: 0; opacity: 1; } .anim-word2 { left: 0; opacity: 1; } </style> </head> <body> <span class="word1">shanghai</span> <span class="word2">hangzhou</span> <script> var word = document.getElementsByTagName('span') var word1 = word[0] var word2 = word[1] setTimeout(function() { word1.className = 'word1 anim-word1' word2.className = 'word2 anim-word2' }, 1000) </script> </body> </html>