定義和用法
一些 CSS 屬性可用于動畫制作，這意味著它們可用于過渡等效果中。
可設置動畫的屬性可以從一個值逐漸更改為另一個值，例如尺寸、數字、百分比和顏色。
瀏覽器支持
表格中的數字注明了完全支持 CSS 動畫的首個瀏覽器版本。
-webkit-、-moz- 或 -o- 后面的數字注明了使用前綴的第一個版本。
| 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
實例
設置背景顏色從紅色到藍色的動畫：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {width: 300px;height: 200px;background: red;animation: mymove 5s infinite;
}@keyframes mymove {from {background-color: red;}to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of background-color</h1><p>逐漸將背景顏色從紅色更改為藍色：<p><div id="myDIV"></div><p><b>注釋：</b>CSS 動畫在 Internet Explorer 9 以及更早版本中不起作用。</p></body>
</html>
動畫相關屬性
下面的表格中列出了 CSS 中的動畫相關屬性：
| 屬性 | |
|---|---|
| background | |
| background-color | |
| background-position | |
| background-size | |
| border | |
| border-bottom | |
| border-bottom-color | |
| border-bottom-left-radius | |
| border-bottom-right-radius | |
| border-bottom-width | |
| border-color | |
| border-left | |
| border-left-color | |
| border-left-width | |
| border-right | |
| border-right-color | |
| border-right-width | |
| border-spacing | |
| border-top | |
| border-top-color | |
| border-top-left-radius | |
| border-top-right-radius | |
| border-top-width | |
| bottom | |
| box-shadow | |
| clip | |
| color | |
| column-count | |
| column-gap | |
| column-rule | |
| column-rule-color | |
| column-rule-width | |
| column-width | |
| columns | |
| filter | |
| flex | |
| flex-basis | |
| flex-grow | |
| flex-shrink | |
| font | |
| font-size | |
| font-size-adjust | |
| font-stretch | |
| font-weight | |
| grid | |
| grid-area | |
| grid-auto-columns | |
| grid-auto-flow | |
| grid-auto-rows | |
| grid-column | |
| grid-column-end | |
| grid-column-gap | |
| grid-column-start | |
| grid-gap | |
| grid-row | |
| grid-row-end | |
| grid-row-gap | |
| grid-row-start | |
| grid-template | |
| grid-template-areas | |
| grid-template-columns | |
| grid-template-rows | |
| height | |
| left | |
| letter-spacing | |
| line-height | |
| margin | |
| margin-bottom | |
| margin-left | |
| margin-right | |
| margin-top | |
| max-height | |
| max-width | |
| min-height | |
| min-width | |
| object-position | |
| opacity | |
| order | |
| outline | |
| outline-color | |
| outline-offset | |
| outline-width | |
| padding | |
| padding-bottom | |
| padding-left | |
| padding-right | |
| padding-top | |
| perspective | |
| perspective-origin | |
| right | |
| text-decoration-color | |
| text-indent | |
| text-shadow | |
| top | |
| transform | |
| transform-origin | |
| vertical-align | |
| visibility | |
| width | |
| word-spacing | |
| z-index |
