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