CSS之動效相關

過渡

• 什麼是過渡
  
  • 元素從一個狀態到另一個狀態的平滑變換的過程
• 過渡屬性
  
  • 元素的哪個屬性發生變化時要使用過渡效果
  • transition-property: none | all | property
• 過渡時間
  
  • 整個過渡效果在多長的時間內完成, 以s或ms爲單位
  • transition-duration: s | ms
  • 過渡時間默認爲0, 此時無過渡效果, 若想看到過渡效果, 必須設置該屬性
• 過渡函數
  
  • 過渡的速度效果
  • transition-timing-function:
    
    • ease 默認值,慢速開始, 速度變快, 慢速結束
    • linear 勻速開始到結束
    • ease-in 慢速開始,加速效果
    • ease-out 慢速結束,減速效果
    • ease-in-out 以慢速開始和結束, 先加速再減速
• 過渡延遲
  
  • 當過渡被觸發後, 等待多長時間後開始執行過渡效果
  • transition-delay: s | ms
• 過渡簡寫
  
  • transition: transition-property transition-durition transition-timing-function transition-delay
  • transition: prop dur func delay
• 多個過渡效果
  
  • transition-property: prop1, prop2;
  • transition-durition: t1, t2;
  • transition-timing-function: func1, func2;
  • transition-delay: delay1, delay2;

動畫

• 什麼是動畫
  
  • 將元素的多個狀態放在一起進行運行(多屬性在多個狀態間過渡), 從而實現複雜的動態效果
  • 注意: 瀏覽器兼容性, 書寫時需要加內核前綴
  • 實現動畫的步驟
    
    • 聲明動畫
      
      • @keyframes 聲明整個動畫過程中的不同狀態是什麼
    • 調用動畫
      
      • 通過animation屬性, 調用已聲明的動畫
• 關鍵幀
  
  • @keyframes規則聲明動畫
    

@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0% {
/*動畫開始的狀態*/
}
20% {
/*動畫執行到20%的狀態*/
}
50% {
…
}
to | 100% {
/*動畫結束時的狀態*/
}
}

動畫屬性

• animation-name: 調用動畫的名稱
• animation-durition: 動畫執行的時長, 以s或ms爲單位
• animation-timing-function: 動畫執行時的速度效果
  
  • 取值爲: ease | linear | ease-in | ease-out | ease-in-out
• animation-delay: 延遲時間, 以s或ms爲單位
• animation-interation-count: 動畫執行的次數, 默認爲一次
  
  • 具體數值 | infinite(無限次循環)
• animation-direction: 動畫播放的方向
  
  • normal
  • alternate
    
    • 奇數次播放爲正向播放
    • 偶數次播放爲逆向播放
• 動畫屬性簡寫
  
  • animation: name durition func delay count dir;
• animation-fill-mode: 指定動畫在播放之前或之後的效果
  
  • none 默認行爲
  • forwards: 動畫完成後, 保持最後一個狀態
  • backwards: 動畫顯示之前,保持在第一個狀態
  • both: 動畫完成後, 動畫顯示前, 都被相應的狀態保持着
• animation-play-state: 定義動畫播放狀態, 配合Javascript使用, 用於播放過程中暫停動畫
  
  • 取值: paused | running