CSS 過渡、變形和動畫

過渡、變形和動畫

• 過渡
• • transition-property屬性
  • transition-duration屬性
  • transition-timing-function屬性
  • transition-delay屬性
  • transition屬性
• 變形
• • 中心點
  • 平移
  • 縮放
  • 傾斜
  • 旋轉
• 動畫

過渡

為元素從一種樣式轉變為另一種樣式時添加效果，例如漸顯、漸弱、動畫快慢等。

transition-property屬性

• transition-property 屬性用于指定應用過渡效果的CSS屬性的名稱。
• 基本文法格式：transition-property: none | all | property;
• 屬性描述：

屬性值	描述
none	沒有屬性會獲得過渡效果
all	所有屬性都将獲得過渡效果
property	定義應用過渡效果的CSS屬性名稱，多個名稱之間以逗号分隔

transition-duration屬性

• transition-duration屬性用于定義過渡效果花費的時間，預設值為0，常用機關是秒（s）或者毫秒（ms）
• 基本文法格式：transition-duration:time;

transition-timing-function屬性

• transition-timing-function屬性規定過渡效果的速度曲線，預設值為“ease“
• 基本文法格式：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
• 屬性描述：

屬性值	描述
linear	指定以相同速度開始至結束的過渡效果，等同于cubic-bezier(0,0,1,1)
ease	指定以慢速開始，然後加快，最後慢慢結束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）
ease-in	指定以慢速開始，然後逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）
ease-out	指定以慢速結束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）
ease-in-out	指定以慢速開始和結束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）
cubic-bezier(n,n,n,n)	定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間

transition-delay屬性

• transition-delay屬性規定過渡效果何時開始，預設值為0，常用機關是秒（s）或者毫秒（ms）
• 基本文法格式：transition-delay:time;
• 正數:過渡動作會延遲觸發。
• 負數：過渡動作會從該時間點開始，之前的動作被截斷。

transition屬性

• transition屬性是一個複合屬性，用于在一個屬性中設定transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。
• 基本文法格式：transition：property duration timing-function delay;

• 注意：1.順序不能颠倒

  2.無論是單個屬性還是簡寫屬性，使用時都可以實作多個過渡效果

  3.如果使用transition簡寫屬性設定多種過渡效果，需要為每個過渡屬性集中指定所有的值，并且使用逗号進行分隔。

變形

• css3變形包括：平移，旋轉，縮放，傾斜
• 基本文法格式：transform：none （不變形）| transform-functions（變形函數或變形函數清單）
• transform-functions函數

  

中心點

• 變形操作都是以元素的中心點為基準進行的，如果需要改變這個中心點，可以使用transform-origin屬性。
• 基本文法格式：transform-origin: x-axis y-axis z-axis;

• 屬性參數：

  transform-origin屬性包含三個參數，其預設值分别為50% 50% 0，各參數的具體含義

參數	描述
x-axis	定義視圖被置于X軸的何處。可能的值有：left，center，right，length，%
y-axis	定義視圖被置于Y軸的何處。可能的值有：top，center，bottom，length，%
z-axis	定義視圖被置于Z軸的何處。可能的值有：length

平移

• transform:translate（x-value,y-value）;
• 說明：x-value指元素在水準方向上移動的距離，y-value指元素在垂直方向上移動的距離。如果省略了第二個參數，則取預設值0。當值為負數時，表示反方向移動元素
• 示意圖

  

縮放

• transform:scale(x-axis,y-axis);
• 說明：x-axis和y-axis參數值可以是正數、負數和小數。正數值表示基于指定的寬度和高度放大元素。負數值不會縮小元素，而是反轉元素（如文字被反轉），然後再縮放元素。如果第二個參數省略，則第二個參數等于第一個參數值。
• 示意圖

  

傾斜

• transform:skew(x-angle,y-angle);
• 說明：參數x-angle和y-angle表示角度值，第一個參數表示相對于X軸進行傾斜，第二個參數表示相對于Y軸進行傾斜，如果省略了第二個參數，則取預設值0。
• 示意圖

  

旋轉

• transform:rotate(angle);
• 說明：參數angle表示要旋轉的角度值。如果角度為正數值，則按照順時針進行旋轉，否則，按照逆時針旋轉。
• 示意圖

  

動畫

@keyframes animationname {
         keyframes-selector{css-styles;}
}
           

• animationname：表示目前動畫的名稱，它将作為引用時的唯一辨別，是以不能為空。
• keyframes-selector：關鍵幀選擇器，即指定目前關鍵幀要應用到整個動畫過程中的位置，值可以是一個百分比、from或者to。其中，from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。
• css-styles：定義執行到目前關鍵幀時對應的動畫狀态，由CSS樣式屬性進行定義，多個屬性之間用分号分隔，不能為空。例如：

屬性值	描述
animation-name	1.屬性初始值為none，适用于所有塊元素和行内元素。 2.keyframename參數用于規定需要綁定到選擇器的keyframe的名稱，如果值為none，則表示不應用任何動畫，通常用于覆寫或者取消動畫
animation-duration	屬性初始值為0，适用于所有塊元素和行内元素。time參數是以秒（s）或者毫秒（ms）為機關的時間，預設值為0，表示沒有任何動畫效果。當值為負數時，則被視為0。
animation-timing-function	用來規定動畫的速度曲線，可以定義使用哪種方式來執行動畫效果。包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用屬性值。
animation-delay	參數time用于定義動畫開始前等待的時間，其機關是秒或者毫秒，預設屬性值為0。animation-delay屬性适用于所有的塊元素和行内元素。
animation-iteration-count	屬性初始值為1，适用于所有的塊元素和行内元素。如果屬性值為number，則用于定義播放動畫的次數；如果是infinite，則指定動畫循環播放。
animation-direction	屬性初始值為normal，适用于所有的塊元素和行内元素。該屬性包括兩個值，預設值normal表示動畫每次都會正常顯示。如果屬性值是"alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等）逆向播放。
animation	animation屬性是一個簡寫屬性，用于綜合設定以上六個動畫屬性。使用animation屬性時必須指定animation-name和animation-duration屬性，否則持續的時間為0，并且永遠不會播放動畫。