CSS3過渡 tansition屬性以及總結
阿新 • • 發佈：2018-11-22
過渡 （transition）
一、為什麼用過渡？
- 1、 CSS3中，為了新增某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。
- 2、 CSS3中新增加了一個新的模組transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。
-
3、 CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。 要實現這一點，必須規定兩項內容：
-
（1）指定要新增效果的CSS屬性
-
（2）指定效果的持續時間。
-
二、過渡有哪些屬性：
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 |
| transition-duration | 定義過渡效果花費的時間。預設是 0。 |
| transition-timing-function | 規定過渡效果的時間曲線。預設是 "ease" |
| transition-delay | 規定過渡效果何時開始。預設是 0。 |
1.transition
過渡動畫transition可以組合簡寫
div.box{ transition:all 0.5s ease-in 0.18s; }
它的語法順序是
{ transition:property duration timing-function delay; }
2.transition-property
transition-property:過渡的 CSS 屬性的名稱
transition-property:all;表示要過渡的所有屬性；
3.transition-duration
transition-duration：Xs；X表示任意數
4.transition-timing-function
ease: 由快到慢
linear: 恆速
ease-in: 速度越來越快
ease-out: 越來越慢
ease-in-out: 先快再慢
cubic-bezier(.17,.67,.83,.67):過渡中自定義屬性自動控制過程中每個階段的快慢
5.transition-delay
transition-delay：過渡延遲時間；如果為負值則直接跳過過渡的 負的延遲的時間過渡效果接著過渡（接下來程式碼都會有體現）；
整合過得程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: #d65688;
/* transition-property:width,height; */
/* transition-duration: 3s; */
/* transition-timing-function:linear; */
/* 勻速過渡 （最長用） */
/* transition-timing-function:ease; 由快到慢 */
/* transition-timing-function:ease-in; 由慢到快 */
/* transition-timing-function: ease-in-out; 慢 勻速 慢 */
/* transition-timing-function:cubic-bezier(0.6, 0.04, 0.98, 0.335);自定義快慢順序 */
/* transition-delay:2s;延遲兩秒過渡 */
/* transition-delay:-1s;跳過前一秒的過渡狀態接著過渡 */
/* transition:width 2s linear 1s,height 2s linear 0.5s;簡寫形式 */
transition:all 2s linear 1s;
/* all代表所有的過渡狀態 */
}
/* 過渡效果一般給需要變化的盒子這樣效果會好的多 */
div:hover{
width: 300px;
height: 400px;
/* transition-property:width,height;
transition-duration: 3s; */
/* 如果給hover狀態的話hover結束就沒有過渡狀態了 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>