標籤：
transition過渡參數：
trasition-property:檢索或設定對象中的參與過渡的屬性（all,none,指定要進行過渡的CSS屬性）
transition-duration:設定對象過渡的期間
transition-timing-function:檢索或設定對象中過渡的動畫類型:
(linear：線性過渡。等同於貝茲路徑(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝茲路徑(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝茲路徑(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝茲路徑(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝茲路徑(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝茲路徑類型，4個數值需在[0, 1]區間內)
transition-delay:檢索或設定對象延遲過渡的時間
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS之transition</title></head><style>.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.test li{position:relative;left:8px;width:220px;height:100px;margin:1px 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:#000;-moz-transition-property:left;-moz-transition-duration:.5s;-webkit-transition-property:left;-webkit-transition-duration:.5s;-o-transition-property:left;-o-transition-duration:.5s;-ms-transition-property:left;-ms-transition-duration:.5s;transition-property:left;transition-duration:.5s;}.test li:nth-child(1){-moz-transition-timing-function:linear; -webkit-transition-timing-function:linear;-o-transition-timing-function:linear;-ms-transition-timing-function:linear;transition-timing-function:linear;}.test li:nth-child(2){-moz-transition-timing-function:ease; -webkit-transition-timing-function:ease; -o-transition-timing-function:ease; -ms-transition-timing-function:ease; transition-timing-function:ease;}.test li:nth-child(3){-moz-transition-timing-function:ease-in;-webkit-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;-ms-transition-timing-function:ease-in;transition-timing-function:ease-in;}.test li:nth-child(4){-moz-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;transition-timing-function:ease-out;}.test li:nth-child(5){-moz-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-ms-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}.test li:hover{left:100px;}</style><body><ul class="test"><li>linear: 線性過渡</li><li>ease: 平滑過渡</li><li>ease-in: 由慢到快</li><li>ease-out: 由快到慢</li><li>ease-in-out: 由慢到快再到慢</li></ul></body></html>
滑鼠經過矩形查看過度效果:
CSS之transition
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
