css3過渡詳解

mySoul發表於2018-08-09
CSSS3

css過渡 css過渡為一種狀態到另外一種狀態的變換

transition 過渡

transition 為一個簡寫屬性，是一個transition-property （定義過渡的屬性的名稱）以及 transition-duration （定義過渡屬性的所需動畫的時間）和 transition-timing-function （描述中間值如何計算的） 以及 transition-delay （描述過渡效果開始作用之前需要等待的時間）

transition-property

transition-property 定義過渡屬性的名稱 即指定引用過渡屬性的名稱

例如要對width屬性應用過渡動畫，則其該屬性的值為width。規定的屬性動畫值有在這 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties 該列表列出來的屬性為可動畫的屬性。

此處輸入圖片的描述

其css如下

div {
	width:300px;
	height:400px;
	background:#698771;
}
div:hover {
	background:#ededed;
	transition-property:background;
}
複製程式碼

html 如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>form表單</title>
</head>
<body>
	<div></div>
	<script src="./index.js"></script>
</body>
</html>
複製程式碼

由於沒有設定過渡的時間，所以效果不大

transition-duration

transition-duration這是一個過渡時間的設定。 設定過渡的時間為3s

此處輸入圖片的描述
非常明顯出現過渡的效果 下面是css

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:background;
	transition-duration:3s;
}
div:hover {
	background:#ededed;
	transition-property:background;
	transition-duration:3s;
}
複製程式碼

下面是html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>form表單</title>
</head>
<body>
	<div></div>
	<script src="./index.js"></script>
</body>
</html>
複製程式碼

transition-timing-function

該屬性用於描述屬性的中間值。即該兩個狀態變化的過渡曲線

single-transition-timing-function （一個過渡函式 ）

其取值是一個三次方的貝塞爾曲線的值。填入一個三個值，根據貝塞爾曲線 參考 https://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A http://www.html-js.com/article/1628 在adobe系列的軟體中ai，ps等都應有了貝塞爾曲線，css中也有貝塞爾曲函式。 獲取一些常見的貝塞爾曲線 github https://github.com/ai/easings.net https://easings.net/zh-cn 根據這個選擇一些常見的貝塞爾曲線。 除了貝塞爾曲線以外還有一些其他的函式，依次說明

貝塞爾曲線

一個栗子

選擇一個貝塞爾曲線

此處輸入圖片的描述

然後html如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>form表單</title>
</head>
<body>
	<div></div>
	<script src="./index.js"></script>
</body>
</html>
複製程式碼

其css如下

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:width;
	transition-duration:3s;
	trasition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
div:hover {
	width:100%;
	transition-property:width;
	transition-duration:3s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
複製程式碼

其效果如下

此處輸入圖片的描述

大概解釋一下

cubic-bezier為一個時序功能的類，該類有四個引數。分別有四個點，對應於三次方的貝塞爾曲線。

此處輸入圖片的描述
p0和p1為起點和終點，其中p0和p1兩個值都是固定的分別為(0,0)和(1， 1)這是兩個起始值和終止值，其中傳入該引數的為p1和p2的值，（p1和p2的值只能在[0,1]的範圍內，否則css將會忽視該屬性的值）

階躍函式 / 赫維賽德函式 / Step function

steps()定義了一個階躍函式 定義，如果實數域上的某個函式可以用半開區間上的指示函式的有限的線性組合表示，其為階躍函式

即，階躍函式為有限段的分段常數函式的 組合

參考; https://en.wikipedia.org/wiki/Step_function

舉栗子

steps(2, start)

此處輸入圖片的描述

start(4, end)

此處輸入圖片的描述

start 表示左連續函式 在動畫開始時發生第一步 end 表示右連續函式 在動畫結束時發生最後一步 為預設值

同樣的該函式僅僅在[0, 1]區間內

此處輸入圖片的描述

css

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:width;
	transition-duration:3s;
}
div:hover {
	width:100%;
	transition-property:width;
	transition-duration:3s;
	transition-timing-function: steps(5, end);
}
複製程式碼

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>form表單</title>
</head>
<body>
	<div></div>
	<script src="./index.js"></script>
</body>
</html>
複製程式碼

幀函式

https://www.w3.org/TR/css-timing-1/#frames-timing-functions 同理根據名字可知為一幀一幀的

此處輸入圖片的描述

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:width;
	transition-duration:3s;
}
div:hover {
	width:100%;
	transition-property:width;
	transition-duration:3s;
	transition-timing-function: frames(10);
}
複製程式碼

由於是草案，暫時不可用

一些定義的關鍵字

linner

一個一次函式，經過原點恆定的速率運動

此處輸入圖片的描述

ease

此處輸入圖片的描述
動畫開始緩慢，急劇加速，然後逐漸減慢

ease-in

此處輸入圖片的描述
動畫開始緩慢，然後逐漸加速直到結束，此時它突然停止。

ease-in-out

動畫開始緩慢，加速，然後減速到最後。

此處輸入圖片的描述

ease-out

此處輸入圖片的描述
動畫突然開始，然後逐漸減慢到最後。

step-start

動畫會立即跳轉到最終狀態，直到結束。

此處輸入圖片的描述

step-end

動畫保持其初始狀態直到結束，此時它直接跳轉到最終狀態。

此處輸入圖片的描述

transition-delay

規定過渡效果開始作用之前需要等待的時間。

此處輸入圖片的描述

css如下

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:width;
	transition-duration:3s;
}
div:hover {
	width:80%;
	transition-property:width;
	transition-duration:3s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-delay: 2s;
}
複製程式碼

過渡總寫

此處輸入圖片的描述

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	transition-property:width;
	transition-duration:3s;
}
div:hover {
	width:80%;
	background:#e8e899;
	transform:width 2s cubic-bezier(0.95, 0.05, 0.795, 0.035) .5s, background 6s cubic-bezier(0.95, 0.05, 0.795, 0.035) 5s;
}
複製程式碼

相關文章