首頁 >web前端 >css教學 >CSS3 中什麼是transition, transform 和 animation?三者的區別

CSS3 中什麼是transition, transform 和 animation?三者的區別

青灯夜游
青灯夜游原創
2018-09-19 15:47:072513瀏覽

本章要跟大家介紹CSS3 中什麼是transition, transform 和 animation?三者的區別。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

transition

transition允許css的屬性值在一定的時間區間內平滑地過渡,語法如下:

transition : transition-property transition-duration transition-timing-function transition-delay [, ...]

transition的相關屬性:

  1. transition-property:用來指定執行transition效果的屬性,可以為 none,all或特定的屬性。

  2. transition-duration:動畫執行的持續時間,單位為s(秒)或 ms(毫秒)。

  3. transition-timing-function:變換速率效果,可選值為ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(自訂時間曲線)。

  4. transition-delay:用來指定動畫開始執行的時間,取值同transition-duration,但是可以為負數。

transform

#transform 分為2D 和3D,這裡暫時只介紹比較常用的2D transform,其主要包含以下幾種變換:旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix,語法如下:

transform: rotate | scale | skew | translate |matrix;

 transform的相關屬性:

  1. #rotate 旋轉
    rotate 的單位是deg 度,正數表示順時針旋轉,負數表示逆時針旋轉。

  2. scale 縮放
    scale 的值範圍是0~n,小於1時表示縮小,反之表示放大。例如scale(0.5, 2)表示水平方向縮小1倍,垂直方向放大1倍, 另外,也可以透過scaleX或scaleY對一個方向進行設定。

  3. skew 扭曲
    skew 的單位跟rotate一樣都是deg 度。例如 skew(30deg, 10deg)表示水平方向傾斜30度,垂直方向傾斜10度。

  4. translate 偏移
    偏移同樣包含水平偏移和垂直偏移。 translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅在垂直方向移動(Y軸移動)。

animation

#CSS3 中的animation 是透過一個叫做Keyframes 關鍵影格的玩意來控制的,他的命名是由"@keyframes"開頭,後面緊接著是這個“動畫的名稱”加上一對花括號“{}”,括號中就是一些不同時間段樣式規則,有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的,如“0%”到"100%"之間,語法如下:

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部写成百分比的形式: 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

animation和transition一樣有自己相對應的屬性,那麼在animation主要有以下幾種:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。以下將其中的一些屬性進行解釋:

  1. animation-name 關鍵影格名:
    用來定義一個動畫的名稱,也就是由前面的keyframes創建的動畫名,預設值為none,當值為none時,將沒有任何動畫效果。如果我們要同時附幾個animation給一個元素,只要用逗號,隔開即可。

  2. animation-iteration-count 動畫循環次數:
    預設為1,如果要進行無限循環,只要設為infinite即可。

  3. animation-direction 動畫播放的方向:
    其只有兩個值,預設值為normal,如果設定為normal時,動畫的每次循環都是向前播放;另一個值是alternate,他的作用是,動畫播放在第偶數次向前播放,第奇數次向反方向播放。

  4. animation-play-state 播放狀態:
    其主要有兩個值,running和paused,其中running為預設值。可以透過paused將正在播放的動畫停下來了,也可以透過running將暫停的動畫重新播放。這個屬性不常用。

#

以上是CSS3 中什麼是transition, transform 和 animation?三者的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn