CSS transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

/* 默认值：all 0 ease 0 */
transition: property duration timing-function delay;

transition 属性值

• transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。当指定的 CSS 属性改变时，过渡效果将开始。

/* 默认值：all */
transition-property: none | all | property;

• transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。值是 0 时不会产生过渡效果。

/* 默认值：0 */
transition-duration: 2s;
transition-duration: 2000ms;

• transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。默认值是 ease。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

• transition-delay

transition-delay 属性规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

/* 默认值：0 */
transition-delay: 1s;
transition-delay: 1000ms;

应用：实现不确定高度元素展开和收起的动画效果

使用 CSS 实现展开收起的动画效果，首先想到的就是通过 height+overflow:hidden 实现，使用这种方法一般都是将 height 的高度固定写死，高度 auto 的话是无法形成过渡动画效果的。auto 是一个关键字值，并非数值，因此 height 从 0 到 auto 是无法计算的。此时可以通过 max-height 实现。

给元素设置 box 类，展开时增加 box-unfolded 类，收起时去掉 box-unfolded 类：

.box {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 600ms;
  -moz-transition: max-height 600ms;
  -o-transition: max-height 600ms;
  transition: max-height 600ms;
}
.box-unfolded {
  max-height: 2000px;
}

max-height 相对 height 来说比较灵活。两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算然后自适应。这种写法必须给定足够存放内容的高度，所以尽量把 max-height 设置大一点。效果展示

应用：模拟长悬停或长按效果

div {
  opacity: .9;
}

div.active {
  opacity: .99;
  transition: opacity 350ms;
}

// 鼠标长时间悬停
div.onmouseenter = function () {
  this.classList.add('active');
}
div.onmouseleave = function () {
  this.classList.remove('active');
}

// 移动端长按
div.ontouchstart = function () {
  this.classList.add('active');
}
div.ontouchend = function () {
  this.classList.remove('active');
}

div.addEventListener('transitionend', function () {
  // 触发长悬停/长按
});

以上。