一些 CSS 属性是 可动画化(animatable),这意味着它们可以用于动画和过渡。
可动画化(Animatable)的属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。
Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。
Safari 和 Chrome 通过带有前缀 -webkit-,支持 CSS 动画。
背景颜色逐渐地从红色变化到蓝色:
运行一下 »@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
在 CSS 中,下列的属性 可动画化(animatable):
属性 |
---|
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 |
flex |
flex-basis |
flex-grow |
flex-shrink |
font |
font-size |
font-size-adjust |
font-stretch |
font-weight |
height |
left |
letter-spacing |
line-height |
margin |
margin-bottom |
margin-left |
margin-right |
margin-top |
max-height |
max-width |
min-height |
min-width |
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 |