CSS3 Transition 過渡動畫用法介紹

時間 2019-12-16

標籤 css3 css transition 過渡動畫用法介紹欄目 CSS 简体版

原文原文鏈接

1、 `transition`過渡動畫介紹

一般，當一個元素的樣式屬性值發生變化時，咱們會當即看到頁面元素髮生變化，也就是頁面元素從舊的屬性值當即變成新的屬性值的效果。css屬性transition能讓頁面元素不是當即的、而是慢慢的從一種狀態變成另一種狀態，從而表現出一種動畫過程。javascript

2、 `transition`屬性語法介紹

屬性	介紹
`transition-property`	元素的哪個屬性將用過渡表現。例如, `opacity`,`color`。默認值是`all`。
`transition-duration`	元素過渡過程持續時間。例如，`1s`。默認值是`0s`。
`transition-timing-function`	元素過渡時的速率函數。例如, `linear`、 `ease-in`、`steps`動畫分段函數或自定義的 `cubic-bezier` 函數)。默認值是`ease`，中間快，兩頭慢。
`transition-delay`	元素過渡延遲的時間。例如，`1s`。默認值是`0s`。

transition-property、transition-duration、transition-delay這三個transition屬性中的每一個屬性都支持多個參數值，參數值之間用逗號分隔，這樣可以用一個樣式規則制定多種CSS屬性的變化。須要注意的是，每一個transition屬性中的多個參數值的順序必定要一致。css

例如：html

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
  transition-delay: 1s, 0s;
}
複製代碼

2.一、 `transition-property`

容許值: none | all | <屬性名>java

初始值: allgit

描述: 指明什麼屬性將觸發過渡動畫效果。none值表示沒有變化。all值表示全部能夠動畫演示的屬性均可以觸發動畫效果。不然，只有指定的屬性值方式變化才能觸發動畫效果。github

下面是一段實例：web

<style>
   * { padding: 0;margin: 0;box-sizing: border-box;}

    .t-demo { width: 600px;margin: 20px; outline: 2px dashed; }

    .t-demo pre { transition: 2s;position: relative;left: 0;width: 100px;height: 100px;margin: 20px 0;
      border-radius: 50%;font-size: 18px;text-align: center;line-height: 100px;background: #82B600;color:#fff; }
      
    .t-demo:hover pre { left: 500px;color: red;}

    .t-demo pre:nth-child(1) { transition-property: none;}

    .t-demo pre:nth-child(2) { transition-property: all; }

    .t-demo pre:nth-child(3) { transition-property: left; }

    .t-demo pre:nth-child(4) { transition-property: left, color;line-height: 30px;padding: 20px 0; }
  </style>
  <div class="t-demo">
    <pre>none</pre>
    <pre>all</pre>
    <pre>left</pre>
    <pre>left,<br>color</pre>
  </div>

複製代碼

2.二、 `transition-duration`

容許值: <時間>segmentfault

初始值: 0bash

描述: 指明元素過渡持續的時間長度。函數

.t-demo pre:nth-child(1) { transition-duration: 0s;}

.t-demo pre:nth-child(2) { transition-duration: 1s;}

.t-demo pre:nth-child(3) { transition-duration: 2s; }

.t-demo pre:nth-child(4) { transition-duration: 3s;}

複製代碼

2.三、 `transition-timing-function`

初始值: ease

描述:

transition-timing-function屬性描述了動畫隨着時間運動的速度-時間函數。能夠使用幾種常見的元素過渡時的速率函數，也能夠使用貝塞爾(cubic-bezier)函數加控制點來自定義動畫的變換速度方式。
step-start等同於 steps(1, start),過渡效果分一步完成，在步的起始開始，即直接過渡到效果。
step-end 等同於 steps(1,end)，過渡效果分一步完成，在步的結束開始，即transition-duration以後完成過渡效果。
steps動畫分段函數。steps有兩個參數。第一個參數表示把動畫分割成幾回。第二個參數能夠取 start 或 end 二者其一。

下面是一段實例：

.t-demo pre:nth-child(1) { transition-timing-function: ease;}

.t-demo pre:nth-child(2) { transition-timing-function: linear;}

.t-demo pre:nth-child(3) { transition-timing-function: ease-out; }

.t-demo pre:nth-child(4) { transition-timing-function: cubic-bezier(0.8,0,0,0.8);}

.t-demo pre:nth-child(5) { transition-timing-function: steps(3,start);}

<div class="t-demo">
    <pre>ease</pre>
    <pre>linear</pre>
    <pre>ease-out</pre>
    <pre>cubic-bezier</pre>
    <pre>steps(3,start)</pre>
</div>

複製代碼

2.四、 `transition-delay`

容許值: <時間>

初始值: 0

描述: 元素過渡動畫開始延遲的時間。

2.五、 `transition`屬性簡寫

下面transition是的簡寫形式對應的單獨的屬性定義：

div {
    
    /*  
        transition-property:left;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 1s;
     */
    transition: left 2s ease 1s;
    
    /*  
        transition-property:left;
        transition-timing-function: ease;
        transition-duration: 2s;
     */
    transition: color 2s;
    
     /*  
        transition-property:all;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 0s;
     */
     transition: 2s;
}

複製代碼

2.六、 `transition`的使用注意事項

transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0px變化到100px，transition能夠算出中間狀態。可是，transition無法算出0px到auto的中間狀態，也就是說，若是開始或結束的設置是height: auto，那麼就不會產生動畫效果。相似的狀況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。