1. 過(guò)渡（transition）

菜鳥(niǎo)教程：CSS3 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

transition： CSS屬性名 持續(xù)時(shí)間 過(guò)渡效果(默認(rèn)ease) 延遲時(shí)間(默認(rèn)0)；

transition：transition-property transition-duration transition-timing-function transition-timing-function；

| 屬性 | 描述

1. | transition | 簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。
2. | transition-property | 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。
3. | transition-duration | 定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。
4. | transition-timing-function | 規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。
5. | transition-timing-function | 規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。

// 鼠標(biāo)滑過(guò)box，延遲0.2秒 寬度從50px過(guò)渡到100px
// css 
.box {
      width: 50px;
      height: 50px;
      background: red;
      transition: width 1s ease .2s;
    }
 // html
    .box:hover {
      width: 100px;
    }

  <div class="box"></div>

transition-timing-function 規(guī)定過(guò)渡效果的時(shí)間曲線。

值 屬性

1. linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
2. ease 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
3. ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
4. ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
5. ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

2. 動(dòng)畫(huà)（animation）

animation：動(dòng)畫(huà)名稱(chēng)（keyframe 名稱(chēng)），花費(fèi)時(shí)間，運(yùn)動(dòng)曲線（默認(rèn)ease），動(dòng)畫(huà)延遲（默認(rèn)0），播放次數(shù)（默認(rèn)1），是否反向播放動(dòng)畫(huà)（默認(rèn)normal），是否暫停動(dòng)畫(huà)（默認(rèn)running）

| 值 | 描述 |
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)。。 |
| animation-duration | 規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 |
| animation-timing-function | 規(guī)定動(dòng)畫(huà)的速度曲線。 |
| animation-delay | 規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。 |
| animation-iteration-count | 規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。 |

animation-fill-mode : none | forwards | backwards | both;
/*none：不改變默認(rèn)行為。
forwards ：當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。
backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫(huà)顯示之前，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）。
both：向前和向后填充模式都被應(yīng)用。 */

.box1 {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: red;
      margin: 100px auto;
      animation: animation1 5s ease-in 1s;
      animation-fill-mode: backwards;
    }

    @keyframes animation1 {
      0% {
        background: red;
        opacity: 1;
      }

      50% {
        background: yellow;
        opacity: 0.5;
      }

      100% {
        background: blue;
        opacity: 0;
      }
    }
<div class="box1"></div>

3. transform 轉(zhuǎn)換

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
transform-origin: bottom right;/* 設(shè)置旋轉(zhuǎn)點(diǎn)，默認(rèn)是中心點(diǎn) */

1. 旋轉(zhuǎn)rotate、 transform-origin: bottom right;/* 設(shè)置旋轉(zhuǎn)點(diǎn)，默認(rèn)是中心點(diǎn) */
   transform: rotate(45deg);

 <div class="box2"> </div>
 .box2 {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transform: rotate(45deg);
      background: url('./kaipin.jpg') 0 0 repeat;
      background-size: cover;
    }

2. 移動(dòng)translate
   transform: translate(100px,100px);

• translateX() ： 通過(guò)給定一個(gè)X方向上的數(shù)目指定一個(gè)translation。只向x軸進(jìn)行移動(dòng)元素，同樣其基點(diǎn)是元素中心點(diǎn)，也可以根據(jù)transform-origin改變基點(diǎn)位置。
• translateY() ：通過(guò)給定Y方向的數(shù)目指定一個(gè)translation。只向Y軸進(jìn)行移動(dòng)，基點(diǎn)在元素心點(diǎn)，可以通過(guò)transform-origin改變基點(diǎn)位置。

3. 縮放scale
   transform: scale(0.6);

• scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放）

4. 扭曲skew
   transform: skew(20deg,30deg);

• skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

5. 矩陣matrix

參考