css3動畫不是軟體,css動畫是使元素逐漸從一種樣式變為另一種樣式,是透過css配合html語言來實現的;css動畫的本質是動畫屬性可以逐漸地從一個值變化到另一個值,可以利用animation屬性來配合動畫屬性來實現css動畫效果。
本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。
CSS 可實現 HTML 元素的動畫效果,而不使用 JavaScript 或 Flash! .
什麼是css動畫
動畫使元素逐漸從一種樣式變成另一種樣式。
您可以隨意更改任意數量的 CSS 屬性。
如需使用 CSS 動畫,您必須先為動畫指定一些關鍵影格。
關鍵影格包含元素在特定時間所擁有的樣式。
一些 CSS 屬性是可以有動畫效果的,這意味著它們可以用於動畫和過渡。
動畫屬性可以逐漸地從一個值變化到另一個值,例如尺寸大小、數量、百分比和顏色。
@keyframes 規則
如果您在 @keyframes 規則中指定了 CSS 樣式,動畫將在特定時間逐漸從目前樣式變更為新樣式。
要讓動畫生效,必須將動畫綁定到某個元素。
下面的範例將 "example" 動畫綁定到
<!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>当动画结束后,会变回最初的样式。</p> </body> </html>
輸出結果:
以上是css3動畫是個軟體嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!