CSS 動(dòng)畫

定義和用法

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

動(dòng)畫屬性可以逐漸地從一個(gè)值變化到另一個(gè)值，比如尺寸大小、數(shù)量、百分比和顏色。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

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


4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

實(shí)例

背景顏色逐漸地從紅色變化到藍(lán)色：

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

運(yùn)行代碼 ?

動(dòng)畫屬性

CSS 中的動(dòng)畫屬性：

屬性	實(shí)例
background	運(yùn)行代碼》
background-color	運(yùn)行代碼》
background-position	運(yùn)行代碼》
background-size	運(yùn)行代碼》
border	運(yùn)行代碼》
border-bottom	運(yùn)行代碼》
border-bottom-color	運(yùn)行代碼》
border-bottom-left-radius	運(yùn)行代碼》
border-bottom-right-radius	運(yùn)行代碼》
border-bottom-width	運(yùn)行代碼》
border-color	運(yùn)行代碼》
border-left	運(yùn)行代碼》
border-left-color	運(yùn)行代碼》
border-left-width	運(yùn)行代碼》
border-right	運(yùn)行代碼》
border-right-color	運(yùn)行代碼》
border-right-width	運(yùn)行代碼》
border-spacing	運(yùn)行代碼》
border-top	運(yùn)行代碼》
border-top-color	運(yùn)行代碼》
border-top-left-radius	運(yùn)行代碼》
border-top-right-radius	運(yùn)行代碼》
border-top-width	運(yùn)行代碼》
bottom	運(yùn)行代碼》
box-shadow	運(yùn)行代碼》
clip	運(yùn)行代碼》
color	運(yùn)行代碼》
column-count	運(yùn)行代碼》
column-gap	運(yùn)行代碼》
column-rule	運(yùn)行代碼》
column-rule-color	運(yùn)行代碼》
column-rule-width	運(yùn)行代碼》
column-width	運(yùn)行代碼》
columns	運(yùn)行代碼》
filter	運(yùn)行代碼》
flex	?
flex-basis	運(yùn)行代碼》
flex-grow	運(yùn)行代碼》
flex-shrink	運(yùn)行代碼》
font	運(yùn)行代碼》
font-size	運(yùn)行代碼》
font-size-adjust	?
font-stretch	?
font-weight	運(yùn)行代碼》
height	運(yùn)行代碼》
left	運(yùn)行代碼》
letter-spacing	運(yùn)行代碼》
line-height	運(yùn)行代碼》
margin	運(yùn)行代碼》
margin-bottom	運(yùn)行代碼》
margin-left	運(yùn)行代碼》
margin-right	運(yùn)行代碼》
margin-top	運(yùn)行代碼》
max-height	運(yùn)行代碼》
max-width	運(yùn)行代碼》
min-height	運(yùn)行代碼》
min-width	運(yùn)行代碼》
opacity	運(yùn)行代碼》
order	運(yùn)行代碼》
outline	運(yùn)行代碼》
outline-color	運(yùn)行代碼》
outline-offset	運(yùn)行代碼》
outline-width	運(yùn)行代碼》
padding	運(yùn)行代碼》
padding-bottom	運(yùn)行代碼》
padding-left	運(yùn)行代碼》
padding-right	運(yùn)行代碼》
padding-top	運(yùn)行代碼》
perspective	運(yùn)行代碼》
perspective-origin	運(yùn)行代碼》
right	運(yùn)行代碼》
text-decoration-color	運(yùn)行代碼》
text-indent	運(yùn)行代碼》
text-shadow	運(yùn)行代碼》
top	運(yùn)行代碼》
transform	運(yùn)行代碼》
transform-origin	運(yùn)行代碼》
vertical-align	運(yùn)行代碼》
visibility	?
width	運(yùn)行代碼》
word-spacing	運(yùn)行代碼》
z-index	運(yùn)行代碼》

上一篇：CSS Web安全字體下一篇：CSS 函數(shù)