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中：

Property
aspect-ratio 尝试一下
background 尝试一下
background-color 尝试一下
background-position 尝试一下
background-position-x 尝试一下
background-position-y 尝试一下
background-size 尝试一下
block-size 尝试一下
border 尝试一下
border-bottom 尝试一下
border-bottom-color 尝试一下
border-end-end-radius 尝试一下
border-end-start-radius 尝试一下
border-block 尝试一下
border-block-color 尝试一下
border-block-end-color 尝试一下
border-block-end-width 尝试一下
border-block-start-color 尝试一下
border-block-start-width 尝试一下
border-block-width 尝试一下
border-bottom-left-radius 尝试一下
border-bottom-right-radius 尝试一下
border-inline 尝试一下
border-inline-color 尝试一下
border-inline-end-color 尝试一下
border-inline-end-width 尝试一下
border-inline-start-color 尝试一下
border-inline-start-width 尝试一下
border-inline-width 尝试一下
border-start-end-radius 尝试一下
border-start-start-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 尝试一下
inline-size 尝试一下
inset 尝试一下
inset-block 尝试一下
inset-block-end 尝试一下
inset-block-start 尝试一下
inset-inline 尝试一下
inset-inline-end 尝试一下
inset-inline-start 尝试一下
left 尝试一下
letter-spacing 尝试一下
line-height 尝试一下
margin 尝试一下
margin-block 尝试一下
margin-block-end 尝试一下
margin-block-start 尝试一下
margin-bottom 尝试一下
margin-inline 尝试一下
margin-inline-end 尝试一下
margin-inline-start 尝试一下
margin-left 尝试一下
margin-right 尝试一下
margin-top 尝试一下
max-height 尝试一下
max-width 尝试一下
max-block-size 尝试一下
max-inline-size 尝试一下
min-block-size 尝试一下
min-inline-size 尝试一下
min-height 尝试一下
min-width 尝试一下
object-position 尝试一下
offset-anchor 尝试一下
offset-distance 尝试一下
offset-path 尝试一下
offset-rotate 尝试一下
opacity 尝试一下
order 尝试一下
outline 尝试一下
outline-color 尝试一下
outline-offset 尝试一下
outline-width 尝试一下
padding 尝试一下
padding-block 尝试一下
padding-block-end 尝试一下
padding-block-start 尝试一下
padding-bottom 尝试一下
padding-inline 尝试一下
padding-inline-end 尝试一下
padding-inline-start 尝试一下
padding-left 尝试一下
padding-right 尝试一下
padding-top 尝试一下
perspective 尝试一下
perspective-origin 尝试一下
right 尝试一下
rotate 尝试一下
scale 尝试一下
text-decoration-color 尝试一下
text-indent 尝试一下
text-shadow 尝试一下
top 尝试一下
transform 尝试一下
transform-origin 尝试一下
translate 尝试一下
vertical-align 尝试一下
visibility
width 尝试一下
word-spacing 尝试一下
z-index 尝试一下