定义和用法
一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。
4.0 -webkit- | 10.0 | 16.05.0 -moz- | 4.0 -webkit- | 15.0 -webkit-12.112.0 -o- |
实例
背景颜色逐渐地从红色变化到蓝色:
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
动画属性
CSS 中的动画属性:
属性 | 实例 |
---|---|
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 | 尝试一下 》 |
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 | 尝试一下 》 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!