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