• 過渡（transition)
  • transition-property:指定要執行過渡的屬性
  • transition-duration:指定過渡效果的持續時間
  • transition-timing-function:過渡的時序函式
  • transition-delay:過渡效果的延遲
• 動畫

過渡（transition)

通過過渡可以指定一個屬性發生變化時的切換方式

transition-property:指定要執行過渡的屬性

多個屬性間使用,隔開
如果所有屬性都需要過渡，則使用all關鍵字
大部分屬性都支援過渡效果，注意過渡時必須是從一個有效數值向另外一個有效數值進行過渡

transition-duration:指定過渡效果的持續時間

時間單位:s和ms 1s = 1000ms

transition-timing-function:過渡的時序函式

指定過渡的執行的方式
可選值:

• ease 預設值，慢速開始，先加速，再減速
• linear 勻速運動
• ease-in 加速運動
• ease-out 減速運動
• ease-in-out 先加速 後減速
• cubic-bezier() 來指定時序函式
  檢視時序函式網址：https://cubic-bezier.com

steps() 分步執行過渡效果
可以設定一個第二個值:

• end ,在時間結束時執行過渡(預設值)

• start ,在時間開始時執行過渡

transition-delay:過渡效果的延遲

等待一段時間後在執行過渡

transition 可以同時設定過渡相關的所有屬性，只有一個要求，如果要寫延遲，則兩個時間中第一個是持續時間，第二個是延遲。

動畫

動畫和過渡類似,都是可以實現一些動態的效果；
不同的是過渡需要在某個屬性發生變化時才會觸發

動畫可以自動觸發動態效果；
設定動畫效果，必須先要設定一個關鍵幀，關鍵幀設定了動畫執行每一個步驟

@keyframes test{
    /*表示動畫的開始位置，也可以使用0%*/
    from{
        margin-left:0;
    }
    /*動畫結束位置,也可以使用100%*/
    to{
        margin-left:800px;
    }
}
 

animation-name: 要對當前元素生效的關鍵幀的名字

animation-duration: 動畫的執行時間

animation-iteration-count動畫執行的次數
可選值:

• 次數
• infinite 無限執行

animation-direction： 指定動畫執行的方向
指定動畫執行的方向

• normal 預設值：從 from 向 to 執行每次都是這樣
• reverse 從 to 向 from 執行每次都是這樣
• alternate 從 from 向 to 執行重複執行動畫時反向執行
• alternate-reverse 從 to 向 from 執行重複執行動畫時反向執行

animation-play-state:設定動畫的執行狀態
可選值:

• running預設值 動畫執行
• paused 動畫暫停

animation-fill-mode:動畫的填充模式
可選值:

• none 預設值動畫執行完畢元素回到原來位置
• forwards 動畫執行完畢元素會停止在動畫結束的位置
• backwards 動畫延時等待時，元素就會處於開始位置
• both 結合了 forwards和 backwards