CSS 動畫

zoom

• 不是標準屬性
• 對文字最小縮到 12pX
• 縮放位置相對於左上角縮放
• 調整時改變了元素佔據的空間大小、尺寸，等比例縮放元素
• *zoom:1 用來給老版本IE瀏覽器（IE6/7）清除浮動

• 因爲縮小改變原來的空間尺寸，因此整個頁面會從新渲染

  單位

1. 百分比 zoom:50% 縮小到原來的一半
2. 數值 zoom:0.5 等同 zoom:50%，不能爲負數
3. zoom:normal 等同於 zoom:1

scale

• 等比例縮放元素 transform: scale(1)
• 對文字等比縮放
• 改變時不會重新渲染頁面
• 默認居中縮放,原始尺寸不變
• 屬於 w3c 規範 IE9以上都支持此屬性
• 使用 transform 會覆蓋之前的 transform 屬性，即 之前 transform 對應的屬性將被所有替換

• 可控制方向 transform:scale(x,y), transform:scaleX(x) or transform:scaleY(y)

  單位

1. 只能是數值
2. 能夠爲負數

chrome 中 同時使用二者效果會疊加

transform 變換

• 支持 3D 變換
• 能夠 拉伸，壓縮，旋轉，偏移目標元素
• 只能轉換由盒子模型定位的元素。根據經驗，若是元素具備display: block，則由盒模型定位元素。（轉換行內元素，須設置display樣式屬性）

• 支持 IE10以上 IE9 需加私有前綴 -ms-（IE） -webkit-(chrome，safari) -o-（opera）-moz- （Firefox)

  類型

  skew

• 對目標對象進行歪斜變換 transform: skew()

參數

• X,Y transform: skew(X,Y) 表示沿着 X軸和 Y軸 扭曲角度 默認爲0

單位

1. degress (度) transform: skew(100deg,100deg)
2. grad (百分度) transform: skew(10grad,10grad)
3. rad（弧度） 一個完整的圓 爲2π transform: skew(10rad,10rad)
4. turn (圈數) 一個完整的圓 爲1turn transform: skew(0.25turn，1.2turn)
5. 能夠爲負數

scale

• 等比例縮放元素 transform: scale(1)

  單位

1. 只能是數值
2. 能夠爲負數

rotate

• 旋轉元素 transform: rotate(x,y)

• 默認以目標對象中心爲圓點轉動

  單位

  同 skew

translate

• 平移目標元素 transform: translate(x,y)

單位

同 skew

---

transition

• 平滑的改變CSS的值
• 只要CSS 屬性值發生改變都會實現過渡效果

• 支持IE10 以上

  類型

transition-property

• 指定過分屬性 transition-property:height height 就會參與過渡

transition-duration

• 指定持續時間 transition-duration:2s 指過渡持續 2S

單位

• s (秒) ms(毫秒)

  transition-delay

• 過渡開始做用以前須要等待的時間。 transition-delay:0.2s 等待0.2S 後執行過渡

  單位

• s (秒) ms(毫秒)

  transition-timing-function

• 指定動畫運動時的節奏 transition-timing-function:ease 勻速運行

參數

• ease
• ease-in 由慢到快
• ease-out 由快到慢
• ease-in-out 由慢到快在到慢
• linear 線性過分
• step-start
• step-end
• steps(5,end)
• 其它參數設置

transition 簡寫

• transition: property-color duration timing-function; transition: height 0.3s ease;

---

animations

• 用來指定一組或多組動畫，每組之間用逗號相隔

• 支持IE10以上

  類型

-webkit-animation-name;

• 指定應用的一系列動畫，每一個名稱表明一個由@keyframes定義的動畫序列

值

• none 默認靜止
• 定義 @keyframes 後的 名字

• 由大小寫不敏感的字母a-z、數字0-九、下劃線(_)和/或橫線(-)組成。第一個非橫線字符必須是字母，數字不能在字母前面，不容許兩個橫線出如今開始位置。

  舉個栗子

.cylon_eye {
    -webkit-animation-name: resize;
}
@-webkit-keyframes resize { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes resize { from { margin-left: -20%; } to { margin-left: 100%; }  }

-webkit-animation-duration

• 指定一個動畫週期的時長
• 默認爲 0 無動畫

單位

• s , ms -webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count

• 定義動畫運行的次數 -webkit-animation-iteration-count:4

屬性

• 默認運行一次
• infinite 無限循環
• 播放的次數 不可爲負值. 能夠用小數定義循環(0.5 將播放動畫到關鍵幀的一半

-webkit-animation-direction

• 指示動畫是否反向播放 -webkit-animation-direction: alternate;

屬性

• normal 默認 每一個動畫循環結束，動畫重置到起點從新開始
• alternate 動畫交替反向運行，反向運行時，動畫按步後退，同時，帶時間功能的函數也反向 計數取決於開始時是奇數迭代仍是偶數迭代
• reverse 反向運行動畫，每週期結束動畫由尾到頭運行。

• alternate-reverse 動畫第一次運行時是反向的，而後下一次是正向，後面依次循環。決定奇數次或偶數次的計數從1開始。
  -webkit-animation-timing-function: ease-in-out;

  animation-timing-function

• 每個動畫週期中執行的節奏，做用於一個關鍵幀週期而非整個動畫週期

  值

  同 transition-timing-function

簡寫語法

• animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 屬性的一個簡寫屬性形式

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;
/* 調用動畫 指定對應 持續時間 運動時的節奏 延遲時間 循環次數 對應動畫 */
  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}
/* 定義動畫 */
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }