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