这篇博客意在用简短的几句话告诉你 CSS3特性 transition 的用法。
transition 有4个性质：
| 名称 | 描述 |
|---|---|
| transition-property | 要进行改变的元素样式 |
| transition-duration | 完成transition的总时间 |
| transition-timing-function | 变化的速度 |
| transition-delay | 延迟多久触发transition |
这4个性质可以被分别设置，也可以写在一行当中，看如下实例：
<button class="btn">TRANSITION</button>
.btn {
width: 400px;
height: 60px;
background-color: #3498db;
outline: none;
border: none;
color: #fff;
transition: background-color 1s ease .5s;
/* Separated usage of transition, which has the same effects of the one-line format.
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: .5s;
*/
}
.btn:hover {
background-color: #e74c3c;
}
注释里的4行和上面的一行实现的效果是一样的
若想同时实现多个transition，可以像下方一样写，也可以用关键词all。
.btn {
width: 400px;
height: 60px;
background-color: #3498db;
outline: none;
border: none;
color: #fff;
transition: width 1s, background-color 1s ease .5s;
/* Separated usage of transition, which has the same effects of the one-line format.
transition-property: width, background-color;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: .5s;
*/
/* You can even change all declared css using "all"
transition: all 1s ease .5s;
*/
}
.btn:hover {
background-color: #e74c3c;
}
共有两种常见的transition触发方式：
- 在上方例子中，我使用了hover来触发transition，这是最常见的使用方式之一。
- 还有一种使用方式是，事先设置好transition，通过javascript来监听DOM元素，事件发生后通过js来改变设置了transition的元素的css。
- 这种方法更高级，可实现的效果更多。
除此之外，transition还可以与transform结合，来实现元素的移动。
照旧，附上我写的一个demo，动手试一试更能明白用法 - CSS transition属性尝试 on JSfiddle
