使元素從一種樣式逐漸變化爲另外一種樣式的效果。css
動畫原理:經過把人物的表情、動做、變化等分解後畫成許多動做瞬間的畫幅,利用視覺暫留的原理,在一幅畫尚未消失前,播放下一幅畫。就會給人形成一種流暢的視覺變化效果。
animation屬性是一個簡寫屬性形式: (能夠用來描述可動畫的屬性)html
可動畫屬性的列表:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Css3的動畫中,咱們不得不提到關鍵幀(@keyframes)
語法:
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必寫項,定義動畫的名稱
keyframes-selector:必寫項,能夠是關鍵幀form(0%)和to(100%)能夠是百分比,表明的是時間的百分比(時間點)
from:0%
to:100%
css-style:css聲明css3
animation-name屬性指定應用的一系列動畫,每一個名稱表明一個由@keyframes定義的動畫序列
值: none特殊關鍵字,表示無關鍵幀。
keyframename標識動畫的字符串
animation-duration屬性指定一個動畫週期的時長。
默認值爲0s,表示無動畫。
值:一個動畫週期的時長,單位爲秒(s)或者毫秒(ms),無單位值無效。注意:負值無效,瀏覽器會忽略該聲明,可是一些早起的帶前綴的聲明會將負值看成0s
animation-timing-function屬性定義CSS動畫在每一動畫週期中執行的節奏。對於關鍵幀動畫來講,timing function做用於一個關鍵幀週期而非整個動畫週期,即從關鍵幀開始,到關鍵幀結束。
動畫的默認效果:由慢變快再變慢
animation-delay定義動畫開始前等待的時間,以秒或毫秒計(屬於動畫外的範疇)
值:瀏覽器
最後,咱們經過一張動畫幀圖製做一個簡易動畫,原圖以下:
css3動畫
CSS3動畫效果圖以下:
函數
代碼以下:動畫
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #test{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 146px; height: 244px; background: url(test.png) no-repeat; background-position:0 0; animation: move 1s steps(7,end) infinite ; } @keyframes move{ from{ background-position: 0 0; } to{ background-position:-1024px 0; } } </style> </head> <body> <div id="test"> </div> </body> </html>
好了,今天的分享就到這裏,固然,可能存在些許錯誤望你們海涵並在評論區多多指正交流,謝謝你們花費時間閱覽!url