一、動畫概述
動畫概念
- 過渡屬性隻能模拟動畫效果
- animation 屬性可以制作類似 Flash 動畫
- 通過關鍵幀控制動畫的每一步
- 使元素從一種樣式逐漸變化為另一種樣式
- 實作複雜的動畫效果
- 浏覽器相容性
- 最新版本支援良好
- Chrome 和 Safari 需要字首 -webkit-
- FireFox 需要字首 -moz-
- Opera 需要字首 -o-
動畫示例
- 聲明動畫
- 建立一個已命名的動畫
- 使用 @keyframes 聲明動畫的關鍵幀
- 為元素調用動畫
- 對元素使用 animation 屬性調用動畫
- 設定動畫的播放時間，播放次數等
二、關鍵幀
@keyframes 的作用
- @keyframes 規則用于聲明動畫
- 指定關鍵幀
- 幀，用于分解動畫動作
- 每個幀代表某個時間點
- 定義每個幀上的動作
@keyframes 的文法
三、動畫屬性
動畫子屬性
- animation-name: 調用動畫，規定需要綁定到選擇器的 keyframe 的名稱
- animation-duration: 動畫完成一個周期所需要的時間
- 取值為數值，機關為秒或者毫秒
- animation-timing-function: 規定動畫的速度曲線
- 取值為預定義函數，如ease、linear、ease-in、ease-out、ease-in-out
- 也可以取值為貝塞爾曲線
- animation-delay: 播放之前的延遲時間
- animation-interation-count: 播放次數
- 取值為數值或者為 infinite
- infinite,表示無限次數播放
- animation-direction: 動畫播放方向
- 取值為normal 或者 alternate
- normal 為預設值，表示正常播放
- alternate 表示輪流播放，即動畫會在奇數次數(1、3、5等等)正常播放，而在偶數次數(2、4、6等等)向後播放
animation屬性
- animation 屬性用于控制動畫
- 調用由@keyframes 定義的動畫
- 設定動畫屬性，如時間、次數等
- animation 屬性是一個簡寫屬性，定義動畫的各方面
- 文法為:
- animation: name duration timing-function delay iteration-count direction;
animation-fill-mode屬性
- 規定動畫在播放之前或之後，其動畫效果是否可見
- 可取值
- none: 不改變預設行為
- forwards: 當動畫完成後，保持最後一個屬性值(在最後一個關鍵幀中定義)
- backwards: 在動畫顯示之前，應用開始屬性值(在第一個關鍵幀中定義)
- both: 向前和向後填充模式都被應用
animation-play-state屬性
- 規定動畫正在運作還是暫停
- 常用于結合 JavaScript 代碼使用，實作在播放過程中暫停動畫
- paused : 動畫暫停
- running: 動畫播放
動畫與過渡
- 過渡用于制作簡單的動畫效果
- 動畫可以制作更為複雜的動畫，控制更為精确