CSS3轉場 transition-timing-function屬性

三、transition-timing-function:

語法：

取值：

transition-timing- function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：

1、ease：（逐漸變慢）預設值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease- out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自訂一個時間曲線），特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值是特定於曲線上點P1和點P2。所有數值需在[0, 1]區域內，否則無效。

其是cubic-bezier為透過貝賽爾曲線來計算「轉換」過程中的屬性值，如下曲線所示，透過改變P1(x1, y1)和P2(x2, y2)的座標可以改變整個過程的Output Percentage。初始預設值為default.

#其他幾個屬性的示意圖：

程式碼實例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s,6s;
  -moz-transition-duration:2s,6s;
  -webkit-transition-duration:2s,6s;
  -o-transition-duration:2s,6s;
   
  transition-timing-function:ease-in,linear;
  -moz-transition-timing-function:ease-in,linear;
  -webkit-transition-timing-function:ease-in,linear;
  -o-transition-timing-function:ease-in,linear;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s,6s; -moz-transition-duration:2s,6s; -webkit-transition-duration:2s,6s; -o-transition-duration:2s,6s; transition-timing-function:ease-in,linear; -moz-transition-timing-function:ease-in,linear; -webkit-transition-timing-function:ease-in,linear; -o-transition-timing-function:ease-in,linear; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear