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