CSS3transition

What the FUCK is transition

transition是transition-property, transition-duration, transition-timing-function, and transition-delay四个CSS属性的缩写,用来定义一个元素在两个状态(样式)之间的过渡效果。什么是状态呢?比如伪类定义的:hover,:active,:focus等状态下的样式,还有js的设置动态效果。什么是过渡效果呢?就是最常见的比如按钮按下去背景慢慢的变化效果。各属性分别介绍乳下:

transition-property:

指定过渡效果用在哪一个css属性上,默认值all,当指定为简写时,比如background,其所有的子属性(background-color…)都会被应用上动画效果,多个值用逗号隔开。上码:

transition-duration:

指定过渡花费的时间(s或ms)。默认值为0,即没有动画效果,负值是不合法的,可以指定多个duration,多个duration是和已定义的property一一对应的。当用普通写法(transition-…)写,且和transition-property不一致时,遵循以下写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
转换为:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}
转换为:
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}

transition-delay:

指延迟触发过渡效果的时间。默认值为0,即状态改变是立即触发transition效果,负值是也是立即触发,不过会表现的从半中间开始渲染一样。当用普通写法(transition-…)写,且和transition-property不一致,且少于transition-property时,用0补齐,多了自动忽略多余的。

transition-timing-function:

这个请参考单独写的WTF系列之animation-timing-function

note
使用transition简写时默认第一个<time>为duration,第二个为delay。

记得加厂商前缀。。。上码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}