浅谈 CSS3 新特性：过渡效果CSS `transitions` 提供了一种在更改 CSS 属性时控制动画速度的方法。

CSS transitions 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为这个过程是由浏览器决定的。

transition-property（必须）

transition-property 指定应用过渡属性的名称。

语法：

transition-property: none|all| property;

none：没有属性会获得过渡动画。
all：所有可被动画的属性都表现出过渡动画。
property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

当属性值列表长度不一致时

以 transition-property 的值列表长度为标准，

如果某个属性列表个数小于属性个数，那么该属性列表项会重复。（举例：transition-duration）

/* 指定的时长个数 小于 属性个数 */
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5ms;
}

/* 时长列表会重复 */
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5ms, 3s, 5ms;
}

如果某个属性列表个数大于属性个数，那么该属性列表项列表会 被裁减。（举例：transition-duration）

/* 指定的时长个数 大于 属性个数 */
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5ms, 2s, 1ms;
}

/* 该列表会 被裁减 */
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5ms;
}

两种情况下，属性列表都保持不变。

transition-duration（必须）

transition-duration ，指定过渡动画所需的时间（以秒或毫秒为单位）。

注意： 默认值为 0s ，即不设置的话，将不会出现过渡动画。

语法：

transition-duration: time;

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。

transition-timing-function

transition 的实现过程是不断地计算出中间值，而 transition-timing-function 属性用来描述这个中间值是怎样计算的（一条加速度曲线）。

语法：

transition-timing-function: <easing-function>;

Easing functions

liner 线性

linear：以相同速度开始至结束（等于 cubic-bezier(0,0,1,1)）。

cubic-bezier() 贝塞尔曲线

ease：慢速开始，然后变快，然后慢速结束（等于 cubic-bezier(0.25,0.1,0.25,1)）。
ease-in：以慢速开始（等于 cubic-bezier(0.42,0,1,1)）。
ease-out：以慢速结束（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out：以慢速开始和结束（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)：自定义 cubic-bezier 函数

steps() 阶梯函数

step-start：等于 steps(1, jump-start) 或 steps(1, start)。
step-end：等于 steps(1, jump-end) 或 steps(1, end)。
steps(number_of_steps, direction)
- number_of_steps：必须是正整数，表示阶梯数。
- direction：指示该函数是左连续还是右连续。（默认，end）
  - jump-start，表示左连续函数，因此在插值开始时发生第一步或跳转；
  - jump-end，表示一个右连续函数，因此在插值结束时发生最后一步或跳转；
  - jump-both，表示左右连续函数；
  - jump-none，表示左右都不连续函数，两端都没有跳跃。每个持续时间的 1 / n。
  - start 等同于 jump-start
  - end 相当于 jump-end

transition-delay

transition-delay，在过渡效果开始作用之前需要等待的时间（以秒或毫秒为单位）。

取值为负时，会导致过渡立即开始。

transition-delay: 2s, 4ms;

transition

transition 是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。多个属性之间用逗号进行分隔。

语法：

transition: property duration timing-function delay;

检测 transition 是否完成

transitionend 事件会在 transition 结束后触发。

transitionend 事件是双向触发的，当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。

transitionend 事件提供两个属性:

propertyName：字符串，指示已完成过渡的属性。
elapsedTime：浮点数，指示当触发这个事件时 transition 已运行的时间（秒）。这个值不受 transition-delay 影响。

我们可以用 element.addEventListener() 方法来监听这个事件，就想这样：

// 针对 Safari 3.1 到 6.0 的代码
document
  .getElementById("myDIV")
  .addEventListener("webkitTransitionEnd", myFunction);

// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
  // 已完成过渡的属性
  const propertyName = event.propertyName;
  // transition 已运行的时间
  const elapsedTime = event.elapsedTime;

  // 打印
  this.innerHTML =
    "Transition property: " +
    propertyName +
    ", lasted: " +
    elapsedTime +
    " seconds";
}

注意： 如果取消了过渡则不会触发 transitionend 事件，因为在过渡完成前动画的属性值改变了。