CSS transition-timing-function

admin發表於2018-09-06
CSSFunction

transition-timing-function屬性用來設定進行動畫過渡型別，也就是屬性值過渡以何種曲線進行。

更多關於transition內容可以參閱CSS transition一章節。

[CSS] 純文字檢視 複製程式碼
transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

引數解析：

（1）.linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) 

（2）.ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) 

（3）.ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) 

（4）.ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0) 

（5）.ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) 

（6）.cubic-bezier(<number>, <number>, <number>, <number>)：4個數值需在[0, 1]區間內。賽貝爾曲線型別可以線上生成，如貝塞爾曲線生成工具。

特別說明：多個屬性值以逗號進行分隔，與transition-property設定的值一一對應。 

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s,6s;
  transition-timing-function:ease-in,linear;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

點選矩形塊檢視相應的屬性效果。

相關文章