web前端全棧0基礎到精通（祺）13

CSS3過渡、變換與動畫

CSS3過渡屬性

• 通過CSS3可以在不使用Flash動畫或JavaScript的情況下，為元素從一種樣式變 換為另一種樣式時新增效果。而CSS3過渡就是元素從一種樣式逐漸改變為另一種的效果。 要實現這一點，必須規定兩項內容：

  規定你希望把效果新增到哪個CSS屬性上 規定效果的時長

• transition-property 規定設定過渡效果的CSS屬性的名稱。

  • none 沒有屬性會獲得過渡效果。
  • all 所有屬性都將獲得過渡效果。
  • property 定義應用過渡效果的CSS屬性名稱列表，列表以逗號分隔。

• transition-duration 規定完成過渡效果需要多少秒或毫秒。

  • time 規定完成過渡效果需要花費的時間（以秒或毫秒計）。預設值是0,意

    味著不會有效果。

• transition-timing-function規定速度效果的速度曲線。

  • linear 規定以相同速度開始至結束的過渡效果。
  • ease 規定慢速開始，然後變快，然後慢速結束的過渡效果。
  • ease-in 規定以慢速開始的過渡效果。
  • ease-out 規定以慢速結束的過渡效果。
  • ease-in-out 規定以慢速開始和結束的過渡效果。

• transition-delay 定義過渡效果從何時開始。

  • time 規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。

• transition屬性簡寫

  • div {
    	transition:width 1s linear 2s;
    }
    

CSS3的 transform 屬性

• transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行位移、旋轉、 縮放或傾斜。

• 語法：

  • transform: none|transform-functions:

    transform屬性的初始值是none。

    transform-functions設定變形函式。如translate ()移動元素、rotate ()旋轉元素、 scale()縮放元素、skew()傾斜元素等。

• 瀏覽器支援：

  • Internet Explorer 9 要求字首-ms-版本，Internet Explorer 10、 Firefox 和Opera 支援 transform 屬性。Chrome 和 Safari 低版本要求字首-webkit-版本。目前大部分瀏覽器都支援transform標準屬性。

• 2D 轉換

  • 2D位移

    • 通過 translate () 函式能夠重新定位元素的座標。

    • translate (x, y) 水平方向和垂直方向同時移動

    • translateX(x) 僅水平方向移動(X軸移動)

    • translateY(Y) 僅垂直方向移動(Y軸移動)

    • x、y為正數表示X、Y軸正向位移，負數為反向位移。

      通過translate()方法，元素從其當前位置移動，根據給定的x座標和y座標

  • 2D旋轉

    • 通過rotate()函式能夠旋轉指定的元素物件。
    • rotate(*deg) 參數列示角度值，取值單位是度deg正數表示順時針旋轉，負數表示逆時針旋轉。

  • 2D縮放

    • 通過scale()函式能夠縮放元素大小。
    • scale (x, y) 水平方向和垂直方向同時縮放
    • scaleX(x) 僅水平方向(X軸)縮放
    • scaleY(Y) 僅垂直方向(Y軸)縮放
    • scale()函式傳遞不同引數時，縮放動畫的效果是不同的。引數為數值，可以是正數、 負數和小數，預設值為1;使用0到1之間的值縮小元素，使用超過1的值放大元素。負數 值則翻轉元素，然後再縮放元素。

  • 2D傾斜

    • 通過skew()函式能夠讓元素傾斜顯示。
    • skew(x，y) 水平方向和垂直方向同時傾斜
    • skewX(x) 僅水平方向(X軸)傾斜
    • skewY(Y) 僅垂直方向(Y軸)傾斜

• 定義變形原點

  • CSS變形原點預設為物件的中心點，如果要改變這個中心點，可以使用transform- origin 屬性進行定義。

  • transform-origin: x y;

    transform-origin 接受兩個引數，引數為一個值時，另一個值預設為center;它們 可以是百分比、em、px等具體值；也可以是left、center、right或者top、center、 bottom等描述性關鍵字。transform-origin的初始值為50% 50%

• 3D 轉換

  • 3D變形有3d位移、3d縮放、3d旋轉。3D的用法和2D差不多，只不過多了個Z軸的 值而己。注意skew扭曲是沒有3D的。
  • transform-style 屬性
    • 規定如何在3D空間中呈現被巢狀的元素。該屬性必須與transform屬性一同使用。
    • flat 子元素將不保留其3D位置。
    • preserve-3d子元素將保留其3D位置。
    • 注意：若同時設了 transform-style: preserve-3d;和overflow: hidden;, 3D 效果 將失效，等價於 transform-style: flat。
  • perspective 屬性
    • 定義3D元素距檢視的距離，以畫素計算。當元素定義了 perspective屬性後，其 子元素會獲得透視效果，而不是元素本身。perspective屬性隻影響3D轉換元素。
    • number元素距離檢視的距離，以畫素計。
    • none 預設值，與0相同，不設定透視。

• 3D位移

  • 在CSS3中，新増translateZ 3D位移函式。功能是讓元素在3D空間沿z軸進行位移。
  • translateZ( t ) t指的是z軸的向量位移長度。當其值為負值時，元素在Z軸越移越遠，導致元素變小。 反之當值為正值時，其在Z軸越移越近，導致元素變得較大。
  • translate3d(x, y, z)函式，可以同時設定元素在三個軸向的位移大小。

• 3D旋轉

  • CSS3中定義的3D 旋轉的函式有:rotateX、rotateY、rotateZ、rotate3d 等。
  • rotateX(a) a.指的是一個旋轉角度值，如果為正值，元素圍繞X軸順時針旋轉；反之，如果為負值， 元素圍繞X軸逆時針旋轉。
  • rotateY(a) a.指的是一個旋轉角度值，如果為正值，元素圍繞Y軸順時針旋轉；反之，如果為負值， 元素圍繞Y軸逆時針旋轉。
  • rotateZ(a) a.指的是一個旋轉角度值，如果為正值，元素圍繞Z軸順時針旋轉；反之，如果為負值， 元素圍繞Z軸逆時針旋轉。
  • rotate3d(x, y, z, angle)
    • x：是一個0到1之間的數值，主要用來描述元素圍繞X軸旋轉的向量值。
    • y：是一個0到1之間的數值，主要用來描述元素圍繞Y軸旋轉的向量值。
    • Z：是一個0到1之間的數值，主要用來描述元素圍繞Z軸旋轉的向量值。
    • angle： 一個角度值，指定在3D空間旋轉角度，正值順時針旋轉，反之元素逆時。

• 3D縮放

  • scaleZ(z);

• CSS3動畫屬性

  animation

  定義動畫過程

  ​ @keyframes 動畫名稱{

  ​ 0% {動畫開始

  ​

  ​ }

  ​ 100% {動畫結束

  ​ }

  ​ }

  • animation-name 動畫名稱（自定義）
    • keyframe name 規定需要繫結到選擇器的keyframe的名稱。
    • none 規定無動畫效果（可用於覆蓋來自級聯的動畫）。
  • animation-duration 完成動畫的時間
    • time 規定完成動畫所花費的時間。預設值是0,意味著沒有動畫效果。
  • animation-timing-function 動畫完成曲線
    • linear 規定以相同速度開始至結束的過渡效果。
    • ease 規定慢速開始，然後變快，然後慢速結束的過渡效果。
    • ease-in 規定以慢速開始的過渡效果。
    • ease-out 規定以慢速結束的過渡效果。
    • ease-in-out 規定以慢速開始和結束的過渡效果。
  • animation-delay 延時
    • time 可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值是0。
  • animation-iteration-count 動畫播放的次數
    • n 定義動畫播放次數的數值。
    • infinite 規定動畫應該無限次播放。
  • animation-direction 是否輪流反向
    • 定義是否應該輪流反向播放動畫。如果animation-direction值是"alternate", 則動畫會在奇數次數（1、3、5等等）正常播放，而在偶數次數（2、4、6等等）向後播放。 注意：如果把動畫設定為只播放一次，則該屬性沒有效果。
    • alternate 輪流反向播放
    • normal 預設正常
  • animation-fill-mode 屬性規定動畫在播放之前或之後，其動畫效果是否可見。
    • none 不改變預設行為。
    • forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
    • backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
    • both 向前和向後填充模式都被應用。
  • animation-play-state 屬性規定動畫正在執行還是暫停。
    • paused 規定動畫已暫停。
    • running 規定動畫正在播放。

• 動畫庫

  • https://daneden.github.io/animate.css/
    <div class="animated bounce" id="" ></div>