CSS 动画
🌙
手机阅读
本文目录结构
CSS 动画定义和用法
一些 CSS 属性是_可以有动画效果的_,这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。
Chrome | IE | FF | safari | open |
---|---|---|---|---|
4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- |
背景颜色逐渐地从红色变化到蓝色:
@keyframes mymove {
from {background-color:red;}
to {background-color: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 | 等待添加效果 |
draft: true | |
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 | 等待添加效果 |