CSS 動畫
定義和用法
一些 CSS 屬性是可以有動畫效果的,這意味著它們可以用於動畫和過渡。
動畫屬性可以逐漸地從一個值變化到另一個值,比如尺寸大小、數量、百分比和顏色。
流覽器支持
表格中的數字表示支持該方法的第一個流覽器的版本號。
緊跟在數字後面的 -webkit-, -moz-, 或 -o- 指定了第一個支持該屬性的流覽器版本首碼。
4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
實例
背景顏色逐漸地從紅色變化到藍色:
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
動畫屬性
CSS 中的動畫屬性:
屬性 | 實例 |
---|---|
flex | |
font-size-adjust | |
font-stretch | |
visibility | |