Matumizi ya Kifungu cha CSS ya Kifungaji

定义和用法

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