一、animation的語法
1、@keyframes——插入關鍵幀
(1)FormTo形式:
(2)百分比的形式:
2、animation-name——定義動畫的名稱
animation-name: none | “動畫的名稱”;
(1)動畫的名稱是由Keyframes創建的動畫名,這里必須和創建的動畫名保持一致。如果不一致,將不能實現任何動畫效果
(2)none為默認值,當值為none時,將沒有任何動畫效果
3、animation-duration
animation-duration: time (s)
animation-duration是指定元素播放動畫所持續的時間,取值為數值,單位為秒(s),其默認值為“0”。
4、animation-timing-function
animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速后減速) || linear(勻速) || cubic-bezier(自定義一個時間曲線)
animation-timing-function是用來指定動畫的播放方式,具有以下六種變換方式:ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速后減速);linear(勻速);cubic-bezier(自定義一個時間曲線)。
新聞熱點
疑難解答