當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

045_CSS3过渡

發布時間：2025/4/17 CSS 76 豆豆

生活随笔收集整理的這篇文章主要介紹了 045_CSS3过渡小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 通過CSS3, 我們可以在不使用Flash動畫或JavaScript的情況下, 當元素從一種樣式變換為另一種樣式時為元素添加效果。

2. 過渡屬性

3. transition屬性

3.1. transition 屬性是一個簡寫屬性, 用于設置四個過渡屬性:

transition-property
transition-duration
transition-timing-function
transition-delay

3.2. 請始終設置 transition-duration屬性, 否則時長為0, 就不會產生過渡效果。

3.3. 默認值

3.4. 可能值

4. transition-property屬性

4.1. transition-property屬性規定應用過渡效果的CSS屬性的名稱。

4.2. 默認值

4.3. 可能值

5. transition-duration屬性

5.1. transition-duration屬性規定完成過渡效果需要花費的時間(以秒或毫秒計)。

5.2. 默認值

5.3. 可能值

6. transition-timing-function屬性

6.1. transition-timing-function屬性規定過渡效果的速度曲線。

6.2. 該屬性允許過渡效果隨著時間來改變其速度。

6.3. 默認值

6.4. 可能值

6.5. 實例

#div1 {transition-timing-function: linear; } #div2 {transition-timing-function: ease; } #div3 {transition-timing-function: ease-in; } #div4 {transition-timing-function: ease-out; } #div5 {transition-timing-function: ease-in-out; }

6.6. cubic-bezier實例

#div1 {transition-timing-function: cubic-bezier(0,0,1,1); } #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); } #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1); } #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1); } #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1); }

7. transition-delay屬性

7.1. transition-delay屬性規定過渡效果何時開始。

7.2. transition-delay值以秒或毫秒計。

7.3. 默認值

7.4. 可能值

8. 例子

8.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3過渡</title><meta charset="utf-8" /><style type="text/css">div {margin: 40px;width: 100px;height: 100px;background: yellow;transition: width 1s linear 0s, height 2s, transform 2s;}div:hover {width: 200px;height: 200px;transform: rotate(180deg);}</style></head><body><div>請把鼠標指針放到黃色的div元素上, 來查看過渡效果。</div></body> </html>

8.2. 效果圖

總結

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

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