当然,这并不是说,不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开:
1
2
3
4
5
6
|
a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}
|
这条定义将产生色彩和背景色的双重变换。
什么可以被变换?
几乎所有的有色彩、大小或位置等组件的CSS属性,包括许多新添加的CSS 3属性, 都可以应用变换。一个值得注意的例外是box-shadow。
来自W3C的变换的说明,这里是一个可以赋予变换的CSS属性的列表,附带转变的对象,我也高亮了一些比较有用的属性。
CSS属性 |
改变的对象 |
background-color |
色彩 |
background-image |
只是渐变 |
background-position |
百分比,长度 |
border-bottom-color |
色彩 |
border-bottom-width |
长度 |
border-color |
色彩 |
border-left-color |
色彩 |
border-left-width |
长度 |
border-right-color |
色彩 |
border-right-width |
长度 |
border-spacing |
长度 |
border-top-color |
色彩 |
border-top-width |
长度 |
border-width |
长度 |
bottom |
百分比,长度 |
color |
色彩 |
crop |
百分比 |
font-size |
百分比,长度 |
font-weight |
数字 |
grid-* |
数量 |
height |
百分比,长度 |
left |
百分比,长度 |
letter-spacing |
长度 |
line-height |
百分比,长度,数字 |
margin-bottom |
长度 |
margin-left |
长度 |
margin-right |
长度 |
margin-top |
长度 |
max-height |
百分比,长度 |
max-width |
百分比,长度 |
min-height |
百分比,长度 |
min-width |
百分比,长度 |
opacity |
数字 |
outline-color |
色彩 |
outline-offset |
整数 |
outline-width |
长度 |
padding-bottom |
长度 |
padding-left |
长度 |
padding-right |
长度 |
padding-top |
长度 |
right |
百分比,长度 |
text-indent |
百分比,长度 |
text-shadow |
阴影 |
top |
百分比,长度 |
vertical-align |
百分比,长度,关键词 |
visibility |
可见性 |
width |
百分比,长度 |
word-spacing |
百分比,长度 |
z-index |
正整数 |
zoom |
数字 |
|