动画相关属性

定义和用法

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