一.過渡

transition-property

• 作用：定義哪個屬性需要過渡。
• 結構：

transition-property: all;

• 常用值：
  1.none：不過渡任何屬性。
  2.all：過渡所有能過渡的屬性。
  3．具體某個屬性名，例如：width、heigth，若有多個以逗號分隔。

transition-duration

• 作用：設置過渡的持續時間。
• 結構：

transition-duration: 1s;

• 常用值：
  1.0：沒有任何過渡時間﹣﹣默認值。
  2.s或ms：秒或毫秒。 3．列表： ■如果想讓所有屬性都持續一個時間，那就寫一個值。 ■ 如果想讓每個屬性持續不同的時間那就寫一個時間的列表。

舉例：

        .box1 {width: 200px;height: 200px;background-color: orange;opacity: 0.5;/* 設置哪個屬性需要過渡效果 */transition-property: width,height,background-color;/* 讓所有能過渡的屬性，都過渡 */transition-property: all;/* 分別設置時間 */transition-duration: 1s,1s,1s;/* 設置一個時間，所有人都用 */transition-duration: 1s;}

transition-delay

• 作用：指定開始過渡的延遲時間，
• 單位：s或ms

transition-timing-function

• 作用：設置過渡的類型

• 常用值：
  1.ease：平滑過渡﹣- 默認值
  2.linear：線性過渡
  3.ease-in：慢一快
  4.ease-out：快→慢
  5.ease-in-out：慢→快一慢
  6.step-start：等同于steps(1,start)
  7.step-end：等同于 steps(1,end)
  8.steps( integer,?): 接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數默認值為end。
  9.cubic-bezie (number,number, number, number):特定的貝塞爾曲線

transition 復合屬性

• 如果設置了一個時間，表示 duration；如果設置了兩個時間，第一是 duration，第二個是delay；其他值沒有順序要求。

transition:1s 1s linear all;

二.動畫

• 結構：

       /* 定義一個動畫（定義一組關鍵幀）—— 第一種方式 */@keyframes 動畫名 {/* 第一幀 */from {}/* 最后一幀 */to {transform: translate(900px);background-color: red;}}/* 定義一個動畫（定義一組關鍵幀）—— 第二種方式 */@keyframes 動畫名 {/* 第一幀 */0% {}/* 最后一幀 */100% {transform: translate(900px) rotate(360deg);background-color: purple;border-radius: 50%;}

• 具體屬性：
  animation-name：給元素指定具體的動畫（具體的關鍵幀）
  animation-duration：設置動畫所需時間
  animation-delay：設置動畫延遲

        .inner {/* 應用動畫到元素 */animation-name: 動畫名;/* 動畫持續的時間 */animation-duration: 3s;/* 動畫延遲時間 */animation-delay: 0.2s;}

• animation-timing-function：設置動畫的類型。

常用值如下：
1.ease：平滑動畫﹣﹣默認值
2.linear：線性過渡
3.ease-in：慢→快
4.ease-out：快→慢
5.ease-in-out：慢→快→慢
6.step-start：等同于 steps(1,start)
7.step-end：等同于 steps(1,end)
8.steps( integer,?): 接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數默認值為end。
9.cubic-bezie (number, number,number, number).

• animation-iteration-count：指定動畫的播放次數，

常用值如下：

1. number：動畫循環次數
2. infinite：無限循環

• animation-direction：指定動畫方向

常用值如下：

1. normal: 正常方向（默認）
2. reverse：反方向運行
3. alternate：動畫先正常運行再反方向運行，并持續交替運行
4. alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

• animation-fill-mode：設置動畫之外的狀態

1. forwards：設置對象狀態為動畫結束時的狀態
   2.backwards：設置對象狀態為動畫開始時的狀態

• animation-play-state：設置動畫的播放狀態，

常用值如下：

1. running：運動（默認）
2. paused：暫停

• 復合屬性
  只設置一個時間表示duration，設置兩個時間分別是：duration和 delay，其他屬性沒有數量和順序要求。

.inner { animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards; }

備注： animation-play-state 一般單獨使用。