CSS animation relaterade egenskaper

定义和用法

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