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