大家好，又見面了，我是你們的朋友全棧君。
一、CSS3中transition的定義
transition: property duration timing-function delay;
transition 屬性是一個簡寫屬性，主要用于設定四個過渡屬性：
| 值 | 描述 |
|---|---|
| transition-property | 規定設定過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒。預設是 0。 |
| transition-timing-function | 規定速度效果的速度曲線。預設是 “ease”。 |
| transition-delay | 定義過渡效果何時開始。預設是 0。 |
二、CSS3中transition屬性介紹
1、transition-property
transition-property是用來指定當元素其中一個屬性改變時執行transition效果。
其主要有以下幾個值：
(1)、none(沒有屬 性改 變)；
(2)、all（所有屬性改變）這個也是其預設值；
(3)、indent（元素屬性名）；
當其值為none時，transition馬上停止執行，當指定為all 時，則元素産生任何屬性值變化時都将執行transition效果，ident是可以指定元素的某一個屬性值。
常用應用過渡的元素
| CSS Property | What Changes |
|---|---|
| background-color | Color |
| background-image | Only gradients |
| background-position | Percentage, length |
| border-bottom-color | Color |
| border-bottom-width | Length |
| border-color | Color |
| border-left-color | Color |
| border-left-width | Length |
| border-right-color | Color |
| border-right-width | Length |
| border-spacing | Length |
| border-top-color | Color |
| border-top-width | Length |
| border-width | Length |
| bottom | Length, percentage |
| color | Color |
| crop | Rectangle |
| font-size | Length, percentage |
| font-weight | Number |
| grid-* | Various |
| height | Length, percentage |
| left | Length, percentage |
| letter-spacing | Length |
| line-height | Number, length, percentage |
| margin-bottom | Length |
| margin-left | Length |
| margin-right | Length |
| margin-top | Length |
| max-height | Length, percentage |
| max-width | Length, percentage |
| min-height | Length, percentage |
| min-width | Length, percentage |
| opacity | Number |
| outline-color | Color |
| outline-offset | Integer |
| outline-width | Length |
| padding-bottom | Length |
| padding-left | Length |
| padding-right | Length |
| padding-top | Length |
| right | Length, percentage |
| text-indent | Length, percentage |
| text-shadow | Shadow |
| top | Length, percentage |
| vertical-align | Keywords, length, percentage |
| visibility | Visibility |
| width | Length, percentage |
| word-spacing | Length, percentage |
| z-index | Integer |
| zoom | Number |
2、transition-duration
transition-duration: time;
transition-duration是用來指定元素 轉換過程的持續時間，取值：<time>為數值，機關為s（秒）,可以作用于所有元素，包括:before和:after僞元素。預設值是 0，意味着不會有效果。
3、transition-timing-function
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | (逐漸變慢)，規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | (加速)，規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | (減速)，規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | (加速然後減速)，規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | (該值允許你去自定義一個時間曲線)，在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
4、transition-delay
transition-delay: time;
transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，取 值：<time>為數值，機關為s（秒），它的使用和transition-duration極其相似，也可以作用于所有元素，包 括:before和:after僞元素。 預設大小是”0″，也就是變換立即執行，沒有延遲。
有時我們不隻改變一個CSS效果的屬性,而是想改變兩個或者多個CSS屬性的transition效果，那麼我們隻要把幾個transition的 聲明串 在一起，用逗号（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：transition-delay與 transition-duration的值都是時間，是以要區分它們在連寫中的位置，一般浏覽器會根據先後順序決定。
文章轉載自： CSS3 transition過渡效果 http://www.studyofnet.com/news/961.html
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/158407.html原文連結：https://javaforall.cn