CSS設置動畫

定義和用法

一些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-

例

動畫背景顏色從紅到藍：

/* Code for Chrome, Safari and Opera */
@-webkit-keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

試一試»

動畫屬性

這些屬性在CSS是動畫：

屬性
background Try it
background-color Try it
background-position Try it
background-size Try it
border Try it
border-bottom Try it
border-bottom-color Try it
border-bottom-left-radius Try it
border-bottom-right-radius Try it
border-bottom-width Try it
border-color Try it
border-left Try it
border-left-color Try it
border-left-width Try it
border-right Try it
border-right-color Try it
border-right-width Try it
border-spacing Try it
border-top Try it
border-top-color Try it
border-top-left-radius Try it
border-top-right-radius Try it
border-top-width Try it
bottom Try it
box-shadow Try it
clip Try it
color Try it
column-count Try it
column-gap Try it
column-rule Try it
column-rule-color Try it
column-rule-width Try it
column-width Try it
columns Try it
filter Try it
flex
flex-basis Try it
flex-grow Try it
flex-shrink Try it
font Try it
font-size Try it
font-size-adjust
font-stretch
font-weight Try it
height Try it
left Try it
letter-spacing Try it
line-height Try it
margin Try it
margin-bottom Try it
margin-left Try it
margin-right Try it
margin-top Try it
max-height Try it
max-width Try it
min-height Try it
min-width Try it
opacity Try it
order Try it
outline Try it
outline-color Try it
outline-offset Try it
outline-width Try it
padding Try it
padding-bottom Try it
padding-left Try it
padding-right Try it
padding-top Try it
觀點試試吧
perspective-origin Try it
right Try it
text-decoration-color Try it
text-indent Try it
text-shadow Try it
top Try it
transform Try it
transform-origin Try it
vertical-align Try it
visibility
width Try it
word-spacing Try it
z-index Try it

CSS 參考

CSS 屬性

CSS設置動畫

定義和用法

瀏覽器支持

例

動畫屬性