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