動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果。可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà)，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果。0% 是動(dòng)畫(huà)的開(kāi)始，100% 是動(dòng)畫(huà)的完成。
1、定義動(dòng)畫(huà)軌跡
@keyframes 動(dòng)畫(huà)名稱(chēng){
from{
動(dòng)畫(huà)初始狀態(tài)
}
to{
動(dòng)畫(huà)結(jié)束狀態(tài)
}
}
//---兼容寫(xiě)法
@-moz-keyframes
@-webkit-keyframes
@-o-keyframes
/* 使用百分比可以實(shí)現(xiàn)動(dòng)畫(huà)連續(xù)執(zhí)行*/
@keyframes 動(dòng)畫(huà)名 {
0%{
}
50%{
}
100%{
}
}
2、調(diào)用動(dòng)畫(huà)
animation: name duration timing-function delay iteration-count direction;
animation-name動(dòng)畫(huà)名稱(chēng)
animation-duration完成動(dòng)畫(huà)所花費(fèi)的時(shí)間
animation-timing-function規(guī)定動(dòng)畫(huà)的速度曲線。
inear勻速
ease低速/加快/變慢
ease-in低速開(kāi)始
ease-out低速結(jié)束
ease-in-out低速開(kāi)始和結(jié)束。
animation-delay動(dòng)畫(huà)開(kāi)始之前的延遲。
animation-iteration-count動(dòng)畫(huà)應(yīng)該播放的次數(shù)。
animation-direction是否應(yīng)該輪流反向播放動(dòng)畫(huà)。
normal 正常播放
reverse 反向播放
alternate 奇數(shù)次正向，偶數(shù)次反向。
alternate-reverse 奇數(shù)次反向，偶數(shù)次正向
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布，希望能對(duì)學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專(zhuān)業(yè)提供網(wǎng)站建設(shè)、APP開(kāi)發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營(yíng)的品牌整合營(yíng)銷(xiāo)服務(wù)讓客戶(hù)通過(guò)網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績(jī)。
