CSS3實現動畫效果常用方法

來源:互聯網
上載者:User

標籤:ace   mat   產生   基本文法   none   轉換函式   影響   :hover   res   

早期在web中要實現動畫效果,都是依賴於JavaScript或flash來完成,但在CSS3中新增加了一個新的模組transition,它可以通過一些簡單的css事件來觸發元素的外觀變化,讓效果顯得更加細膩。簡單來說,就是通過滑鼠的單擊、獲得焦點、被點擊、或對元素任何改變中觸發,並平滑地以動畫效果改變css屬性值


在css中建立簡單的過渡效果可以從以下幾個步驟來實現

(1)在預設樣式中聲明元素的初始狀態樣式

(2)聲明過渡元素最終狀態樣式,比如懸浮狀態

(3)在預設樣式中通過添加過渡函數,添加一些不同的樣式

1 css變形屬性transform指一群組轉換函數,transform-origin屬性指定元素的中心點在哪,新增加了第三個數transform-origin-z控制元素三維空間的中心點。transform-style的值設定為preserve-3d,建立一個3D渲染環境transform屬性的基本文法如下:transform:none|[transform-function]|transform-function]....可用於內嵌元素和塊元素。其預設值為none,表示元素不進行變形。另一個屬性值時一系列的變形函數,表示一個或多個變形函數,以 空格分開;表示同時對一個元素進行變形的多種屬性操作,例如rotate、scale、translate等translate(): 移動元素,可以根據X軸和Y軸座標重新置放元素位置。在此基礎上有兩個擴充函數 translateX()和translateY();scale():縮小或方法元素,可以使用元素尺寸發生變化,在此基礎上用兩個擴充函數 scaleX()和scaleY();rotate(): 旋轉元素,其參數值為旋轉的角度值(360deg)skwe();讓元素傾斜。在此基礎上有兩個擴充函數skewX()和skewY()matrix():定義矩陣變形,基於X軸和Y軸
transform-origin屬性可以指定元素的中心點位置。預設情況下,變形 的原點在元素的中心點,或者是元素X軸和Y軸的50%處,transform-origin的文法格式如下:
transform-origin:[percentage | length |  left | center | right | top | bottom] | 
需要注意的是transform可以只設定一個值 也可以設定兩個值 和三個值
transform-style屬性是3D空間 的一個重要屬性,指定嵌套元素如何在3D空間中呈現 主要有兩個屬性值,flat和preserve-3D
2 過渡屬性transitioncss3的transition功能很簡單: css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在按一下滑鼠、獲得焦點、被點擊或對元素任何改變中觸發,並平滑地以動畫效果改變css的屬性值css3過渡與元素上的常規樣式一起聲明。只要目標屬性更改,瀏覽器就會應用過渡。除了使用JavaScript觸發動作外,在css中也可以通過一些偽類來觸發,如:hover、:focus、:active、:target和:checked等。以下是使用css建立愛你簡單過渡的步驟:(1)在預設樣式中聲明元素的初始狀態樣式(2)聲明過渡元素最終樣式,比如懸浮狀態(3)在預設樣式中通過添加過渡函數,添加一些不同的樣式。
css過渡屬性

過渡屬性是一個複合屬性,主要包括以下幾個屬性

  • transition-property:指定過渡或動態類比的css屬性
  • transition-duration:指定完成過渡所需的時間
  • transition-timing-function:指定過渡函數
  • transition-delay:指定開始出現的延遲時間
(1)transition-property屬性

transition-property用來指定過渡動畫的CSS屬性名稱,而這個過渡屬性只有具備一個中點值的屬性(需要產生動畫的屬性)才能具備過渡效果。

如要改變元素的寬度屬性,可將transition-property的屬性設定為width

(2)transition-duration屬性

transition-duration屬性主要用來設定一個屬性過渡到另一個屬性所需的時間,也就是從舊屬性過渡到新屬性花費的時間長度,俗稱期間

如果改變一個屬性,所持續的時間為50ms,可將該屬性的值設定為50ms

(3) transition-timing-function屬性

transition-timing-function屬性指的是過渡的“easing 函式”。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,其中要包括以下幾種函數:

(4)transition-delay屬性

transition-delay屬性和transition-duration屬性極其類似,不同的是transition-duration是用來設定過渡動畫的期間,而transition-delay主要用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行

如將元素的寬度從100px變為300px

(5) transation的局限性

transition的優點在於簡單易用,但是它有幾個很大的局限。 
(1)transition需要事件觸發,所以沒法在網頁載入時自動發生。 
(2)transition是一次性的,不能重複發生,除非一再觸發。 
(3)transition只能定義開始狀態和結束狀態,不能定義中間狀態,也就是說只有兩個狀態。 
(4)一條transition規則,只能定義一個屬性的變化,不能涉及多個屬性。 
CSS Animation就是為瞭解決這些問題而提出的。

3  animation動畫(1)@keyframes規則

keyframes被稱為主要畫面格,其類似於flash中的主要畫面格。在css3中其主要以“@keyframes"開頭,後滿緊跟著是動畫名稱加上一對花括弧{...},括弧中就是一些不同時間段樣式規則

在一個"@keyframes"中的樣式規則可以有多個百分比構成的,如在”0%"到"100%"之間建立更多個百分比,分別給每個百分比中給需要有動畫效果的元素加上不同的樣式,從而達到一種在不斷變化的效果。

經驗與技巧:在@keyframes中定義動畫名稱時,其中0%和100%還可以使用關鍵詞from和to來代表,其中0%對應的是from,100%對應的是to

(2) animation屬性

animation-name屬性主要用來調用@keyframes定義好的動畫,需要特別注意:animation-name調用的動畫名需要和"@keyframes“定義的動畫名稱完全一致(區分大小寫),如果不一致將不具有任何動畫效果

注意:需要在Chrome和Safari上面的基礎上加上-webkit-首碼,Firefox加上-moz-。

animation-duration屬性主要用來設定CSS3動畫播放時間,其使用方法和transition-duration類似,是用來指定元素播放動畫所持續的時間長,也就是完成從0%到100%一次動畫所需的時間

animatino-timing-function屬性主要用來設定動畫播放方式。主要讓元素根據時間的推進來改變屬性的變換速率,就是動畫的播放方式。它和transition中的transition-timing-function 中的值一樣

animation-delay屬性用來定義動畫開始播放的時間,用來觸發動畫播放的時間點。和transition-delay屬性一樣,用於定義在瀏覽器開始執行動畫之前等待的時間。

animation-iteration-count屬性主要用來定義動畫的播放次數,其通常為整數,單頁可以為小數,其預設值為1,這意味著動畫將從開始到結束只播放一次;如果取值為infinite,動畫將無限次的播放。

animation-direction屬性主要用來設定動畫播放方向,其主要有兩個值:normal、alternate

normal是預設值,如果設定為normal時,動畫每次迴圈都是向前播放

另一個是alternate,他的作用是,動畫播放在第偶數次向前播放,第奇數次向反方向播放

animtion-play-state屬性是用來控制元素動畫的播放狀態。其主要有兩個值:running和paused。

其中running是其預設值,可以通過該值將暫停動畫重新比方,這裡的重新播放不一定是從元素動畫的開始播放,而是從暫訂那個位置開始播放。如果暫訂了動畫的播放。元素的樣式將回到最原始設定狀態

animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值:none、forwards、backwords和both。其四個屬性值對應效果如下:

在預設情況之下,動畫不會影響它的主要畫面格之外的屬性,使用animation-fill-mode屬性可以修改動畫的預設行為。簡單的說就是告訴動畫在第一主要畫面格上等待動畫開始,或者在動畫結束時停在最後一個主要畫面格上而不回到動畫的第一幀上。或者同時具有這兩個效果。

最後總結一下:

animation屬性類似於transition,他們都是隨著時間改變元素的屬性值,其主要區別在於:使用transition屬性只能通過指定屬性的初始狀態和結束狀態,然後在兩個狀態之間進行平滑過渡的方式來實現動畫;animation在不需要觸發任何事件的情況下,也可以顯式的隨時間變化來改變元素CSS屬性,達到一種動畫的效果

4  動畫相關的事件

-webkit-animation動畫有三個事件:
    開始事件 webkitAnimationStart
    結束事件 webkitAnimationEnd
    重複運動事件 webkitAnimationIteration

css3的過渡屬性transition,在動畫結束時,也存在結束的事件:webkitTransitionEnd(translation僅僅有這一個事件)

CSS3實現動畫效果常用方法

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.