css3如何實(shí)現(xiàn)動(dòng)畫(huà)

小新
213
2021-04-20 17:14:55

css3實(shí)現(xiàn)動(dòng)畫(huà)的方法：1、在通過(guò)transition設(shè)置過(guò)渡，添加transform設(shè)置形狀，從而可以實(shí)現(xiàn)動(dòng)畫(huà)效果；2、添加animation屬性，設(shè)置動(dòng)畫(huà)效果即可。


css3如何實(shí)現(xiàn)動(dòng)畫(huà)


具體使用示例：

1.通過(guò)transition設(shè)置過(guò)渡，添加transform設(shè)置形狀，實(shí)現(xiàn)動(dòng)畫(huà)效果。


.divadd {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;

transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}

2.添加animation屬性，實(shí)現(xiàn)動(dòng)畫(huà)效果。


.a1 {
position: absolute;
animation: a1 3s;
opacity: 0
}
@keyframes a1 {
0% {left: 10px;opacity: 0}
30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
90% {left: 100px;background-color: red;opacity: 1}
100% {left: 10px;opacity: 0}
}　

相關(guān)屬性：


animation-name: myfirst; //動(dòng)畫(huà)名稱(chēng)，用于animation引用
animation-duration: 5s; //動(dòng)畫(huà)時(shí)長(zhǎng)，
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

屬性分析：

animation-fill-mode

設(shè)置動(dòng)畫(huà)結(jié)束后的狀態(tài)

none：默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài)，DOM未進(jìn)行動(dòng)畫(huà)前狀態(tài)

forwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)，100%或to時(shí)，當(dāng)設(shè)置animation-direcdtion為reverse時(shí)動(dòng)畫(huà)結(jié)束后顯示為keyframes第一幀

backwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài),測(cè)試顯示DOM未進(jìn)行動(dòng)畫(huà)前狀態(tài)

both：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)，結(jié)束時(shí)狀態(tài)優(yōu)先


0 踩