CSS Animatiegerelateerde Eigenschappen

定义和用法

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