過渡 · web前端

[TOC] # 過渡(CSS3) 過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片在CSS3里使用transition可以實現補間動畫（過渡效果），并且當前元素只要有“屬性”發生變化時即存在兩種狀態(我們用A和B代指），就可以實現平滑的過渡，為了方便演示采用hover切換兩種狀態，但是并不僅僅局限于hover狀態來實現過渡。語法格式: ~~~ transition: 要過渡的屬性花費時間運動曲線何時開始; ~~~ | 屬性 | 描述 | CSS | | -------------------------- | ----------------------- | ---- | | transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 | | transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 | | transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 | | transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 | | transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 | transition-duration 花費時間,單位秒s, 這個單位必須要寫運動曲線示意圖： ![](https://img.kancloud.cn/a7/aa/a7aa2b826c8f3fb404d02e80445ebca1_1682x604.png) ~~~css img { width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%; transition:transform 0.5s ease-in 0s; } img:hover { transform:rotate(180deg); } ~~~ ~~~ <style> * { margin: 0px; padding: 0px; } div { width: 200px; height: 100px; margin: 100px auto; background-color: pink; /* transition: 要過渡的屬性花費時間運動曲線何時開始; */ /* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */ /* transtion 過渡的意思這句話寫到div里面而不是 hover里面 */ /*transition: all 0.6s; 所有屬性都變化用all 就可以了后面倆個屬性可以省略 */ /*默認的是ease 先快在慢*/ transition: width 1s, height 2s; } div:hover { /* 鼠標經過盒子，我們的寬度變為400 */ width: 600px; height: 600px; } </style> <body> <div> </div> </body> ~~~