transition是过度的意思，显然，就是从哪个值到哪个值，用一个相对长的时间，而不是一下子， 如果是一下子从某个值变化到另外一个值，很可能会感觉很突兀，不够平滑，我们希望把过渡过程展现的丝滑一些。

transition相关属性是CSS3提供的，IE9及以下版本不支持这些属性。jQuery的animate()方法提供了相同的功能。

safari3.1-6、iOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀。

transition-property设置要变化的CSS属性。就是过度过程中要改变哪个CSS属性的值。

transition-property的使用格式：

transition-property : none | all | [css-property] [, css-property]

绝大多数的CSS属性都是可以进行变化的。默认是all。

transition-duration设置这个过度过程要持续多久。单位是s，而且必须带上s，即使是0也要带上。

transition-duration的使用格式：

transition-duration : value [, value]

可以设置多个值。并且必须带上单位s。

transition-delay设置这个过度要从多久之后开始。单位是s，而且必须带上s，即使是0也要带上。

transition-delay的使用格式：

transition-delay : value [, value]

可以设置多个值。并且必须带上单位s。

transition-timing-function设置这个过度过程中的变化节奏函数。

transition-timing-function的使用格式：

transition-timing-function : value [, value]

可以设置多个值。每个值都是字符串。

transition-timing-function可以使用下面的值：

• ease
  又快到慢，这是默认值。
• linear
  恒速
• ease-in
  速度越来越快
• ease-out
  速度越来越慢
• ease-out
  速度先变快后又变慢
• cubic-bezier(x1,y1,x2,y2)
  cubic-bezier直译为“立方-贝塞尔”，实际上指的是三阶贝塞尔曲线。
  我们知道，三阶贝塞尔曲线需要4个点：一个起点，一个终点，两个控制点。而cubic-bezier的起点和终点已经被固定好了， 起点坐标是(0,0)，终点坐标是(1,1)，所以cubic-bezier(x1,y1,x2,y2)中，(x1,y1)、(x2,y2)分别表示两个控制点。 并且x1、y1、x2、y2的范围都在(0，1)区间内。
  上面的5个方式都是特定参数的cubic-bezier(x1,y1,x2,y2)。 贝塞尔曲线在计算机图形学中有着广泛的应用，在绘图工具PS、Sketch中你都会遇到它。 本来它是让图形边缘变得不再是直的，从而绘制光滑的曲线，把它应用到速度变化上， 能够让速度变化是连贯的，而不是突兀和生硬的！

示例：

transition-timing-function:cubic-bezier(.25,.1,.25,1)

这儿有一个可以调整参数后立马看效果的网站：http://cubic-bezier.com

一次性设置好transition-property、transition-delay、transition-duration、transition-timing-function。

transition的使用格式：

transition : single-transition [, single-value]

这表示可以设置多段，每一段时间用逗号隔开。每一段的格式如下：

[transition-property] [transition-duration] [transition-timing-function] [transition-delay]

示例：

.sliding-menu {
    width: 200px;
    background: red;
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}

.sliding-menu {
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

现在，点击某个按钮之后，通过javascript改变那个元素的宽度和背景，那个元素的宽度和背景颜色就开始变化了，而且是以平滑动画的展示的，不是一瞬间就变化了。

transition通常与transform联合使用，创建丰富的交互体验。

transition需要触发才会动起来。如何才能触发呢？只要让要改变的属性的取值发生变化，不就触发了么！触发方法有下面这些：

通过触发伪类，顺带触发，所以，我们将transition相关属性写在伪类里面，当触发了伪类，就触发了动画。

示例：

.sliding-menu:hover {
    width : 200px;
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

.sliding-menu:hover {
    width : 500px;
}

示例：

.sling-menu {
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px) {
    .sliding-menu {
        width : 500px; //属性值发生了变化，就会触发动画
    }
}

示例：

.sliding-menu {
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

var slidingMenu = $('.sliding-menu');
slidingMenu.click(function() {
    slidingMenu.css('width', 300); //属性值发生了变化，就会触发动画
});