CSS3transition

css

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);
}