我們使用CSS3可以實(shí)現(xiàn)動(dòng)畫(huà),主要的方式是通過(guò)animation 實(shí)現(xiàn)的。
animation屬性
- animation-name :動(dòng)畫(huà)的名稱
- animation-duration:設(shè)置動(dòng)畫(huà)時(shí)間
- animation-iteration-count:設(shè)置動(dòng)畫(huà)次數(shù),其中有一個(gè)屬性infinite為無(wú)限循環(huán)
- animation-direction:設(shè)置動(dòng)畫(huà)是否應(yīng)該反向,默認(rèn)正常播放,默認(rèn)值為normal,如果值為'alternate'時(shí)動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)正常播放
- animation-delay:設(shè)置動(dòng)畫(huà)延時(shí),當(dāng)要用到幾個(gè)動(dòng)畫(huà)的先后順序時(shí),可以使用
- animation-timing-function: 設(shè)置動(dòng)畫(huà)結(jié)束的時(shí)候應(yīng)用最后一幀的動(dòng)畫(huà),linear線性過(guò)渡。ease平滑過(guò)渡。ease-in由慢到快。ease-out由快到慢
- animation-fill-mode:none默認(rèn)值。forwords設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。backwards設(shè)置狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)。both設(shè)置對(duì)象為動(dòng)畫(huà)結(jié)束或開(kāi)始時(shí)的狀態(tài)
- animation-play-state:設(shè)置動(dòng)畫(huà)的暫停與播放,running運(yùn)動(dòng),paused暫停
那么這樣說(shuō)吧,我們不是要用到動(dòng)畫(huà)嗎?那么動(dòng)畫(huà)的使用要在該元素中設(shè)置一個(gè)animation,而具體的動(dòng)畫(huà)操作我們需要用到@keyframes
例:
@keyframes changeColor{
0%{
background:blue;
}
50%{
background: red;
}
100%{
background:yellow;
}
.box{
animation: changeColor 2s infinite;
}
這樣的話顏色的變化可能不是很明顯,不過(guò)這樣的話我們可以加上一個(gè)屬性:
transition: all .8s;