CSS3中的元素过渡属性transition
過渡transition
如果當鼠標移動上div 使盒子變大并改變自己的顏色 以及 向右移動50px 向下移動50px
初始狀態
鼠標移上的狀態
以下是實現上面效果的代碼
但是如果我需要 這些變化有一個過度的效果 如果是使用js編寫 是有點復雜的 而css3給我們提供了一個過渡的屬性transition屬性
W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性
因此只需要在元素的樣式下 加上
transition: all 1s; /all表示監控所有的變化/
如果是使用js需要寫一大推 使用css3 只需要幾行樣式 而且腳本方法改變多個元素樣式可能會產生沖突 元素與元素之間互不影響
transition 有四個屬性
transition-property：指定過渡或動態模擬的css屬性
transition-duration：指定過渡所需要的時間
transition-timing-function：指定過渡函數
transition-delay：指定開始出現的延遲時間
可以使用復合寫法
transition-property 指定屬性產生過渡
| all 默認值 | 所有屬性都將獲得過渡效果。 |
| none | 沒有屬性會獲得過渡效果。 |
| property | 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。 |
all是所有屬性都將獲得過渡效果。這個上面我們已經演示過下面看看 多個屬性的寫法
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>div {width: 100px;height: 100px;background-color: royalblue;position: absolute;/*transition: all 1s; */ /*all表示監控所有的變化*/transition: width 1s ,top 1s;/*指定寬度和top產生過渡*/}div:hover {width: 200px;height: 200px;top: 100px;left: 100px;background-color: cadetblue;</style></head><body><div></div></body> </html>
從這我們可以看出 只有width屬性和top屬性產生了過度效果，其他的都是直接改變的
當然也不是所有的樣式都可以過渡 有的是沒有過度效果的參與過渡的屬性有
color visibility opacity vertical-align z-index clip width/height top/bottom/left/right background-color/position border-top/bottom/left/right-color/width border/letter/word-spacing font-size/weight line-height margin/padding-top/bottom/left/right max/min-height/width outline-color/width text-indent/shadowtransition-duration漸變時間 （必選）
代表幾秒鐘內過渡 如果是時間為0則沒有過度效果
比如我需要 top的變化在10內完成 只需要改變 top 時間
width 屬性的過度完成的很快但是top的過都就是一個很緩慢的過程
transition-delay 控制動畫的延遲 （可選）
如果你想要延遲過渡，也就是說如果我們想要在過渡前停一小會兒 ，那么就在這個復合屬性的后添加我們需要延遲的時間 這個屬性可以對多個不同的屬性進行設置 、
比如我們 鼠標移上width在10s后開始產生過渡 top在5s后
那么
產生的效果：
transition-timing-function 指定transition效果的轉速曲線（也就是過度的速度變化）
| linear | 線性過渡，等價貝塞爾曲線(0.0, 0.0, 1.0, 1.0) |
| ease（默認） | 平滑過渡，等價貝塞爾曲線(0.25, 0.1, 0.25, 1.0) |
| ease-in | 由慢到快，等價貝塞爾曲線(0.42, 0, 1.0, 1.0) |
| ease-out | 由快到慢，等價貝塞爾曲線(0, 0, 0.58, 1.0) |
| ease-in-out | 由慢到快再到慢，等價貝塞爾曲線(0.42, 0, 0.58, 1.0) |
| step-start | 等同 steps(1, start) |
| step-end | 等同 steps(1, end) |
cubic-bezier(n,n,n,n): 自定義貝塞爾曲線的效果，其中的四個參數為從0到1的數字。
如果這些屬性里都沒有你需要的你可以在瀏覽器控制臺調試你所需要的貝塞爾曲線的效果
下面是使用 cubic-bezier(0.07, 1.03, 0.98, -0.41) 產生的效果
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>div {width: 100px;height: 100px;background-color: royalblue;position: absolute;/*transition: all 1s;*/ transition: width 1s cubic-bezier(0.07, 1.03, 0.98, -0.41) ;}div:hover {width: 400px;</style></head><body><div></div></body> </html>總結
以上是生活随笔為你收集整理的CSS3中的元素过渡属性transition的全部內容，希望文章能夠幫你解決所遇到的問題。
