總結CSS3新特性 Animation篇

2022-02-08 18:12:23 字數 2248 閱讀 1070

動畫(animation),是css3的亮點.//之一

通過animation屬性指定@keyframe來完成關鍵幀動畫;

@keyframes name /*


0%可用from關鍵字替代


*/50% 100% /*


100%可用to關鍵字替代


*/}
由於是css3,所以不出意外的各種字首:

--來自mdn,css中的關鍵幀

單個幀中可填寫多個屬性,而且不需要保證一致,如:

@-webkit-keyframes identifier 50% to }


/*這是乙個完全有效的關鍵幀定義


*/
需要注意的有幾點:

關鍵幀中有效的屬性為可動畫屬性;如出現不可動畫屬性,會忽略該屬性,不影響其餘屬性的動畫,

如屬性後跟有 !important,則會忽略該屬性,

某個關鍵幀如果重複定義,則取後定義的幀,　　

@-webkit-keyframes identifier 50% to 100%  /*


由於to關鍵字表示100%,所以該動畫只會執行改變顏色為green,而to所對應的屬性全部被忽略


*/}
幀數範圍為0%-100%,不屬於這個範圍的則被忽略(經實驗,關鍵幀定義可以不按順序來,可以正確執行,但是可讀性不太好);

animation-name:設定動畫的名稱,就是@keyframe後跟的標識;

animation-duration:設定動畫花費的時間,//這兩個為必填屬性,第乙個不解釋了,第二個必填的原因為預設值是0s,0s是不會產生動畫效果的,所以為必填;

#demo @keyframe demo to }
animation-timing-function:設定動畫的速度曲線,預設值為 ease,

可選值有數個,可通過

cubic-bezier

函式來自定義,這裡有一些定義好的,可以直接拿來用的函式,

傳送陣;

#demo
animation-delay:設定動畫開始前的等待時間,預設為0s;

#demo
animation-iteration-count:設定動畫執行次數,預設為1,使用 

infinite

關鍵字可以使動畫無限迴圈;

#demo
animation-direction:設定動畫執行完後時候倒序執行,預設為

normal

,使用 

alternate

關鍵字開啟倒序執行

//僅有

animation-iteration-count

值為大於1次

時才會啟用,倒序執行消耗時間為

animation-duration

設定的時間,奇數次數為正序,偶數次數為倒序;

#demo
animation-play-state:設定動畫當前狀態,預設是

running

,為執行狀態,可以設定為 

paused

為暫停,

#demo #demo:hover
animation-fill-mode:設定動畫執行完後的狀態(復原(

none

),保持第一幀(

backwards

)以及保持最後一幀(

forwards

),還有乙個

both

值 mdn說是同時

backwards

和forwards

,原諒我沒有試出它與

forwards

的區別...,)

//設定animation-iteration-count值為infinite時將導致該屬性失效;

animation的簡寫方式對順序要求特別嚴格,規格如下:

animation:name duration timing-function delay iteration-count direction play-state fill-mode;

各種字首...@keyframe裡邊如果用到了transform,也是需要加字首的,如:

@-webkit-keyframe demo to }
mdn的動畫

css3中的關鍵幀

w3school的animation屬性

w3school的@keyframe規則

CSS3新特性總結

1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...