過渡：元素從一種效果過渡另一種效果上

要求： 1、把效果添加到哪個CSS屬性 2、過渡效果的時長 3、效果觸發的動作（hover）

目錄

1.單項改變

2.多項改變

3.指定過渡的速度

4.延遲過渡效果

5.總結

---

1.單項改變

<style type="text/css"> div{/* 寬度2秒的過渡 */transition:width 2s,height 3s,transform 3s; } div:hover{width: 500px;height: 500px;transform:rotate(40deg);background: red; } </style>

2.多項改變

多項改變： 同時制定多個屬性進行過渡效果，添加多個屬性，用逗號進行隔開 <style type="text/css"> div {width: 100px;height: 100px;background: red;transition: width 2s, height 4s; }div:hover {width: 300px;height: 300px; } </style>

3.指定過渡的速度

用transition-timing-function屬性

ease	規定過渡效果，先緩慢地開始，然后加速，然后緩慢地結束（默認）
linear	規定從開始到結束具有相同速度的過渡效果
ease-in	規定緩慢開始的過渡效果
ease-out	規定緩慢結束的過渡效果
ease-in-out	規定開始和結束較慢的過渡效果
cubic-bezier(n,n,n,n)	允許您在三次貝塞爾函數中定義自己的值

<style type="text/css"> div:hover {width: 300px; } #div {transition-timing-function: ease-in;} </style>

4.延遲過渡效果

用transition-delay屬性

<style type="text/css"> div {transition-delay: 2s; } 《/style》

5.總結

CSS 過渡屬性：

transition	簡寫屬性，用于將四個過渡屬性設置為單一屬性。
transition-delay	規定過渡效果的延遲（以秒計）。
transition-duration	規定過渡效果要持續多少秒或毫秒。
transition-property	規定過渡效果所針對的 CSS 屬性的名稱。
transition-timing-function	規定過渡效果的速度曲線。

總結

以上是生活随笔為你收集整理的css的过渡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。