CSS動畫

定義和用法

一些 CSS 屬性是可以有動畫效果的，這意味著它們可以用于動畫和過渡。

動畫屬性可以逐漸地從一個值變化到另一個值，比如尺寸大小、數量、百分比和顏色。

瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。

緊跟在數字后面的 -webkit-, -moz-, 或 -o- 指定了第一個支持該屬性的瀏覽器版本前綴。

動畫屬性實例

背景顏色逐漸地從紅色變化到藍色：

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

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嘗試一下 》
height嘗試一下 》
left嘗試一下 》
letter-spacing嘗試一下 》
line-height嘗試一下 》
margin嘗試一下 》
margin-bottom嘗試一下 》
margin-left嘗試一下 》
margin-right嘗試一下 》
margin-top嘗試一下 》
max-height嘗試一下 》
max-width嘗試一下 》
min-height嘗試一下 》
min-width嘗試一下 》
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嘗試一下 》