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

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

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

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

It 這只是一個動畫，可以理解為由多個變換組成的組。

語法:

動畫名稱{

From {css1}

至{ css2 }

}

動畫名稱{

0% {css1}

50% {css2}

100% {css3}

}

注意:animation屬性用于控制動畫的外觀，選擇器也用于綁定動畫。

二、動畫屬性值

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

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

動畫-持續(xù)時間動畫指定需要多少秒或毫秒來完成。

動畫計時功能設(shè)置動畫如何完成一個循環(huán)。

動畫延遲設(shè)置動畫開始前的延遲間隔。

動畫迭代計數(shù)定義動畫播放的次數(shù)。

Animation-direction指定動畫是否應(yīng)該反過來播放。

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

例如:

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

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

div { animation:我的移動5s無限；

-WebKit-animation:我的移動5s無限；/*野生動物園和鉻*/

}

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如何實現(xiàn)鼠標(biāo)移上變長特效？

例子

Department {

Width: 100 pixels

}

Div: hover {

Width: 200 pixels

}

可以加動畫效果，體驗更好！