css3如何制作動畫 @keyframes創(chuàng)建動畫的好處？
@keyframes創(chuàng)建動畫的好處？@關鍵幀語法規(guī)則在動畫制作過程中，您可以多次更改CSS樣式。當發(fā)生指定的更改時，使用%,或者使用關鍵字from和to，這與0%到100%相同。0%是開始動畫，100
@keyframes創(chuàng)建動畫的好處？
@關鍵幀語法規(guī)則
在動畫制作過程中，您可以多次更改CSS樣式。當發(fā)生指定的更改時，使用%,或者使用關鍵字from和to，這與0%到100%相同。0%是開始動畫，100%是動畫結束時。為了獲得最佳的瀏覽器支持，應該始終將其定義為0%和100。%的選擇器。
It 這只是一個動畫，可以理解為由多個變換組成的組。
語法:
動畫名稱{
From {css1}
至{ css2 }
}
動畫名稱{
0% {css1}
50% {css2}
100% {css3}
}
注意:animation屬性用于控制動畫的外觀，選擇器也用于綁定動畫。
二、動畫屬性值
當調用這個動畫時，動畫由六個屬性組成:
Animation-name指定綁定到選擇器的關鍵幀的名稱。
動畫-持續(xù)時間動畫指定需要多少秒或毫秒來完成。
動畫計時功能設置動畫如何完成一個循環(huán)。
動畫延遲設置動畫開始前的延遲間隔。
動畫迭代計數(shù)定義動畫播放的次數(shù)。
Animation-direction指定動畫是否應該反過來播放。
動畫:當動畫名稱的時間-速度曲線開始時，延遲播放次數(shù)依次反轉。
例如:
讓正方形從左上角到右上角，再到右下角，到左下角，最后到左上角，顏色會相應變化。
使用@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)鼠標移上變長特效？
例子
Department {
Width: 100 pixels
}
Div: hover {
Width: 200 pixels
}
可以加動畫效果，體驗更好！