css3變形 過渡 動畫

標籤：平面   規則   rspec   css   指定   ima   alt   元素   元素定位   

CSS3 變形/變換相關屬性

• transform 設定或檢索對象的檢索（none 2D 3D）
• transform-origin：設定或檢索對象以某個原點進行檢索
• transform-style: flat（預設）指定子項目位於次元素所在平面內/preserve-3d 指定子項目定位在三維空間內
• perspective: 長度單位 指定觀察者距離平面的距離
• perspective-origin 指定觀察者的位置 left/right/center
• backface-visibialbe: visible(預設)/hidden

變形方法 transform-function

• 2d
• 位移
  • translate(x,y)
  • translatex()
  • translatey()
• 縮放
  • scale(x,y)
  • scalex()
  • scaley()
• 旋轉
  • rotate(deg)
• 傾斜
  • skew(x,y)
  • skewx()
  • skewy()
• 3d
• 位移
  • translatez()
  • translate3d(x,y,z)
• 縮放
  • scalez()
  • scale3d(x,y,z)
• 旋轉
  • rotatex()
  • rotatey()
  • rotatez()
  • rotate3d(x,y,zdeg)

CSS過渡相關屬性

• trasition
• transition-property 設定對象中的參與過渡屬性 (可以設定多個屬性值，以逗號隔開)
  • 預設為all：所有可以進行過渡的css屬性
  • none:不指定過渡的css屬性
• transition-timing-function 設定對象過渡持續的時間
• transition-duriation
• transition-delay

觸發時機

• 偽類別選取器
• JS觸發
• 媒體查詢

可以過渡的屬性

• 長度
• 顏色
• 變換

CSS3 動畫相關屬性

• 主要畫面格文法：@keyframes{from to }

• animation 設定對象所應用的動畫特效，如果提供多組屬性值，以逗號進行分割

  • 注意：如果只提供一個time參數，則為動畫的期間；
  • 若提供二個time參數，則第一個為期間，第二個為拖延時間
• animation-name 設定對象所應用的動畫名稱（必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義）
• animation-duration 設定對象動畫的期間
• animation-timing-function 設定對象動畫的過渡類型
  • 值：ease(預設)平滑過渡，由快到慢
  • linear: 線性過渡
  • ease-in:由慢到快
  • ease-out:由快到慢
  • ease-in-out:由慢到快再到慢
• animation-delay：指定對象動畫的拖延時間
• animation-iteration-count 迴圈次數
  • number：動畫迴圈次數
  • infinite:無線迴圈
• animation-dirction 設定對象動畫在迴圈中是否反向運動
  • normal 正常反向（預設）
  • reverse 反方向運行
  • alternate:動畫先正常運行後反向運行，並持續交替運行
  • alternate-reverse:動畫先反向運行後再正向運行，並持續交替運行
• animation-play-state: 設定對象動畫的狀態running（預設）/pasused
• animation-fill-mode: 設定對象動畫時間之外的狀態
  • none 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素
  • forwards 在動畫結束後（由animation-literation-count決定），動畫將應用該屬性值
  • backwards:動畫將應用在animmation-delay定義期間啟動動畫的第一次迭代的主要畫面格中定義的屬性值
  • both 動畫遵循forwards和backwards的規則。也就是說，動畫會在兩個方向上擴充動畫屬性

主要畫面格

    #keyframes 動畫名稱{        form{        }        to{        }    }

css3變形 過渡 動畫