@keyframes創(chuàng)建動(dòng)畫(huà)的好處？@關(guān)鍵幀語(yǔ)法規(guī)則在動(dòng)畫(huà)制作過(guò)程中，您可以多次更改CSS樣式。當(dāng)發(fā)生指定的更改時(shí)，使用%,或者使用關(guān)鍵字from和to，這與0%到100%相同。0%是開(kāi)始動(dòng)畫(huà)，100

@keyframes創(chuàng)建動(dòng)畫(huà)的好處？

@關(guān)鍵幀語(yǔ)法規(guī)則

在動(dòng)畫(huà)制作過(guò)程中，您可以多次更改CSS樣式。當(dāng)發(fā)生指定的更改時(shí)，使用%,或者使用關(guān)鍵字from和to，這與0%到100%相同。0%是開(kāi)始動(dòng)畫(huà)，100%是動(dòng)畫(huà)結(jié)束時(shí)。為了獲得最佳的瀏覽器支持，應(yīng)該始終將其定義為0%和100。%的選擇器。

It 這只是一個(gè)動(dòng)畫(huà)，可以理解為由多個(gè)變換組成的組。

語(yǔ)法:

動(dòng)畫(huà)名稱{

From {css1}

至{ css2 }

}

動(dòng)畫(huà)名稱{

0% {css1}

50% {css2}

100% {css3}

}

注意:animation屬性用于控制動(dòng)畫(huà)的外觀，選擇器也用于綁定動(dòng)畫(huà)。

二、動(dòng)畫(huà)屬性值

當(dāng)調(diào)用這個(gè)動(dòng)畫(huà)時(shí)，動(dòng)畫(huà)由六個(gè)屬性組成:

Animation-name指定綁定到選擇器的關(guān)鍵幀的名稱。

動(dòng)畫(huà)-持續(xù)時(shí)間動(dòng)畫(huà)指定需要多少秒或毫秒來(lái)完成。

動(dòng)畫(huà)計(jì)時(shí)功能設(shè)置動(dòng)畫(huà)如何完成一個(gè)循環(huán)。

動(dòng)畫(huà)延遲設(shè)置動(dòng)畫(huà)開(kāi)始前的延遲間隔。

動(dòng)畫(huà)迭代計(jì)數(shù)定義動(dòng)畫(huà)播放的次數(shù)。

Animation-direction指定動(dòng)畫(huà)是否應(yīng)該反過(guò)來(lái)播放。

動(dòng)畫(huà):當(dāng)動(dòng)畫(huà)名稱的時(shí)間-速度曲線開(kāi)始時(shí)，延遲播放次數(shù)依次反轉(zhuǎn)。

例如:

讓正方形從左上角到右上角，再到右下角，到左下角，最后到左上角，顏色會(huì)相應(yīng)變化。

使用@keyframes在CSS3中創(chuàng)建動(dòng)畫(huà)，并舉例說(shuō)明代碼塊。

div { animation:我的移動(dòng)5s無(wú)限；

-WebKit-animation:我的移動(dòng)5s無(wú)限；/*野生動(dòng)物園和鉻*/

}

My actions

{

0% { top:0px； Left : 0px; Background : red; }

25% { top:0px； Left : 100 px; Background : blue; }

50% { top:100px； Left : 100 px; Background : yellow; }

75% { top:100px； Left : 0px; Background : green; }

100% { top:0px； left:0px； Background : red; }

}

mymove /* Safari和鉻*/

{

0% { top:0px； left:0px； Background : red; }

25% { top:0px； Left : 100 px; Background : blue; }

50% { top:100px； Left : 100 px; Background : yellow; }

75% { top:100px； left:0px； Background : green; }

100% { top:0px； left:0px； Background : red; }

}

Css3如何實(shí)現(xiàn)鼠標(biāo)移上變長(zhǎng)特效？

例子

Department {

Width: 100 pixels

}

Div: hover {

Width: 200 pixels

}

可以加動(dòng)畫(huà)效果，體驗(yàn)更好！