CSS animation-related properties

定义和用法

一些 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 Prøv det
background-color Prøv det
background-position Prøv det
background-size Prøv det
border Prøv det
border-bottom Prøv det
border-bottom-color Prøv det
border-bottom-left-radius Prøv det
border-bottom-right-radius Prøv det
border-bottom-width Prøv det
border-color Prøv det
border-left Prøv det
border-left-color Prøv det
border-left-width Prøv det
border-right Prøv det
border-right-color Prøv det
border-right-width Prøv det
border-spacing Prøv det
border-top Prøv det
border-top-color Prøv det
border-top-left-radius Prøv det
border-top-right-radius Prøv det
border-top-width Prøv det
bottom Prøv det
box-shadow Prøv det
clip Prøv det
color Prøv det
column-count Prøv det
column-gap Prøv det
column-rule Prøv det
column-rule-color Prøv det
column-rule-width Prøv det
column-width Prøv det
columns Prøv det
filter Prøv det
flex Prøv det
flex-basis Prøv det
flex-grow Prøv det
flex-shrink Prøv det
font Prøv det
font-size Prøv det
font-size-adjust
font-stretch
font-weight Prøv det
grid Prøv det
grid-area Prøv det
grid-auto-columns Prøv det
grid-auto-flow Prøv det
grid-auto-rows Prøv det
grid-column Prøv det
grid-column-end Prøv det
grid-column-gap Prøv det
grid-column-start Prøv det
grid-gap Prøv det
grid-row Prøv det
grid-row-end Prøv det
grid-row-gap Prøv det
grid-row-start Prøv det
grid-template Prøv det
grid-template-areas Prøv det
grid-template-columns Prøv det
grid-template-rows Prøv det
height Prøv det
left Prøv det
letter-spacing Prøv det
line-height Prøv det
margin Prøv det
margin-bottom Prøv det
margin-left Prøv det
margin-right Prøv det
margin-top Prøv det
max-height Prøv det
max-width Prøv det
min-height Prøv det
min-width Prøv det
object-position Prøv det
opacity Prøv det
order Prøv det
outline Prøv det
outline-color Prøv det
outline-offset Prøv det
outline-width Prøv det
padding Prøv det
padding-bottom Prøv det
padding-left Prøv det
padding-right Prøv det
padding-top Prøv det
perspective Prøv det
perspective-origin Prøv det
right Prøv det
text-decoration-color Prøv det
text-indent Prøv det
text-shadow Prøv det
top Prøv det
transform Prøv det
transform-origin Prøv det
vertical-align Prøv det
visibility
width Prøv det
word-spacing Prøv det
z-index Prøv det