Atrybuty animacji CSS

定义和用法

一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。

可设置动画的属性可以从一个值逐渐更改为另一个值,例如尺寸、数字、百分比和颜色。

浏览器支持

表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。

数字注明了使用前缀的第一个版本。

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