CSS 動畫相關屬性

定義和用法

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

實例

設置背景顏色從紅色到藍色的動畫：

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

親自試一試

動畫相關屬性

下面的表格中列出了 CSS 中的動畫相關屬性：

屬性 TIY
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 試一試