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