web前端全棧0基礎到精通(祺)13

Midk 發表於 2020-12-24

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>