CSS - transition简介

这篇博客意在用简短的几句话告诉你 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触发方式：

1. 在上方例子中，我使用了hover来触发transition，这是最常见的使用方式之一。
2. 还有一种使用方式是，事先设置好transition，通过javascript来监听DOM元素，事件发生后通过js来改变设置了transition的元素的css。

• 这种方法更高级，可实现的效果更多。

除此之外，transition还可以与transform结合，来实现元素的移动。
照旧，附上我写的一个demo，动手试一试更能明白用法 - CSS transition属性尝试 on JSfiddle