站長資訊網(wǎng)
css3動畫不是軟件，css動畫是使元素逐漸從一種樣式變?yōu)榱硪环N樣式，是通過css配合html語言來實(shí)現(xiàn)的；css動畫的本質(zhì)是動畫屬性可以逐漸地從一個值變化到另一個值，可以利用animation屬性配合動畫屬性來實(shí)現(xiàn)css動畫效果。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css3動畫不是軟件
CSS 可實(shí)現(xiàn) HTML 元素的動畫效果，而不使用 JavaScript 或 Flash！.
什么是css動畫
動畫使元素逐漸從一種樣式變?yōu)榱硪环N樣式。
您可以隨意更改任意數(shù)量的 CSS 屬性。
如需使用 CSS 動畫，您必須首先為動畫指定一些關(guān)鍵幀。
關(guān)鍵幀包含元素在特定時間所擁有的樣式。
一些 CSS 屬性是可以有動畫效果的，這意味著它們可以用于動畫和過渡。
動畫屬性可以逐漸地從一個值變化到另一個值，比如尺寸大小、數(shù)量、百分比和顏色。
@keyframes 規(guī)則
如果您在 @keyframes 規(guī)則中指定了 CSS 樣式，動畫將在特定時間逐漸從當(dāng)前樣式更改為新樣式。
要使動畫生效，必須將動畫綁定到某個元素。
下面的例子將 "example" 動畫綁定到 <div> 元素。動畫將持續(xù) 4 秒鐘，同時將 <div> 元素的背景顏色從 "red" 逐漸改為 "yellow"：
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body> <p><b>注釋：</b>本例在 Internet Explorer 9 以及更早的版本中無效。</p> <div></div> <p><b>注釋：</b>當(dāng)動畫結(jié)束后，會變回最初的樣式。</p> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）
