CSS3Transition過渡動畫用法介紹

NO IMAGE

一、 transition過渡動畫介紹

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

二、 transition屬性語法介紹

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

transition-propertytransition-durationtransition-delay這三個transition屬性中的每個屬性都支持多個參數值,參數值之間用逗號分隔,這樣能夠用一個樣式規則制定多種CSS屬性的變化。需要注意的是,每個transition屬性中的多個參數值的順序一定要一致。

例如:

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

2.1、 transition-property

允許值: none | all | <屬性名>

初始值: all

描述: 指明什麼屬性將觸發過渡動畫效果。none值表示沒有變化。all值表示所有可以動畫演示的屬性都可以觸發動畫效果。否則,只有指定的屬性值方式變化才能觸發動畫效果。

下面是一段實例:

 <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>

CSS3Transition過渡動畫用法介紹

2.2、 transition-duration

允許值: <時間>

初始值: 0

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

.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;}

CSS3Transition過渡動畫用法介紹

2.3、 transition-timing-function

允許值: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2) | step-start | step-end | [, [ start | end ] ]?

初始值: ease

描述:

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

下面是一段實例:


.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>

CSS3Transition過渡動畫用法介紹

2.4、 transition-delay

允許值: <時間>

初始值: 0

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

2.5、 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.6、 transition的使用注意事項

  • transition需要明確知道,開始狀態和結束狀態的具體數值,才能計算出中間狀態。比如,height0px變化到100pxtransition可以算出中間狀態。但是,transition沒法算出0pxauto的中間狀態,也就是說,如果開始或結束的設置是height: auto,那麼就不會產生動畫效果。類似的情況還有,display: noneblockbackground: url(foo.jpg)url(bar.jpg)等等。

三、參考鏈接

zh.javascript.info/css-animati…

www.webhek.com/post/css-an…

www.ruanyifeng.com/blog/2014/0…

segmentfault.com/a/119000000…

leaverou.github.io/animatable/

相關文章

ThreadLocal的進化——TransmittableThreadLocal

為什麼每一個爬蟲工程師都應該學習Kafka

SpringSecurityOAuth2開發者指南譯

基於Webpack4的Vue移動端開發環境搭建篇