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