CSS 中，transition 属性用于指定为一个或多个 CSS 属性添加过渡效果。
最为常见的用法，也就是给元素添加一个 transition，让其某个属性从状态 A 变化到状态 B 时，不再是非常直接突兀，而是带有一个补间动画。
举个例子：
<div></div>
div {
width: 140px;
height: 64px;
transition: .8s transform linear;
}
div:hover {
transform: translate(120px, 0);
}
当然，除了上述基本的用法，其实 CSS transition 还有一些非常有意思的细节和有趣的用法。
并非所有属性都支持 transition
并非所有属性都支持 transition。和 animation 类似，这里有一个列表，列出了所有支持 transition 的属性 -- CSS animated properties
当然，有的时候，还有更例外的。某些支持 transition 的属性在某些特定状态下，也是不支持 transition 的。非常典型的就是 height: auto 和 width: auto。
元素的动态高度过渡动画失效，伪代码大概是这样：
{
height: unset;
transition: height 0.3s linear;
&.up {
height: 0;
}
&.down {
height: unset;
}
}
明明给 height 属性设置了 transition，但是过渡动画没有触发，而是直接一步到位展开：
原因在于， CSS transtion 不支持元素的高度或者宽度为 auto 的变化。
对于这种场景，我们可以使用 max-height 进行 hack。
这里有一个非常有意思的小技巧。既然不支持 height: auto，那我们就另辟蹊径，利用 max-height 的特性来做到动态高度的伸缩，譬如：
{
max-height: 0;
transition: max-height 0.3s linear;
&.up {
max-height: 0;
}
&.down {
max-height: 1000px;
}
}
transition 可以精细化控制每一个属性
继续。在 transition 中，我们可以使用transition: all 1s linear这样，统一给元素下面的所有支持过渡的属性添加过渡效果（时间及缓动函数）。
同时，我们也可以分别精细化控制每一个属性：
{
// 可以这样
transition: all 1s linear;
// 也可以这样
transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}
并且，和动画类似，每一个过渡都是支持延迟触发的：
div {
// 延迟 1s 触发过渡，过渡动画的时间为 0.8 秒
transition: .8s transform 1s linear;
}
div:hover {
transform: translate(120px, 0);
}
可以看到不管是过渡触发，还是过渡复位，都会等待 1 秒再触发。
利用这个技巧，我们就可以实现一些过渡效果的结合。首先我们实现这样一个宽高变化的过渡动画：
<div></div>
div {
position: relative;
width: 200px;
height: 64px;
box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0; left: 0; width: 0; height: 0;
box-sizing: border-box;
transition: width .25s, height .25s, border-bottom-color;
transition-delay: .25s, 0s, .25s;
}
div:hover::before {
width: 200px;
height: 64px;
border-left: 3px solid #00e2ff;
border-bottom: 3px solid #00e2ff;
}
我们分别控制元素的伪元素的高度、宽度、及下边框的变化，并且给宽度过渡动画和下边框的颜色动画设置了 0.25 秒的延迟，这样元素的高度会先进行过渡，由于整体的过渡动画世界时间也是 0.25s，所以高度过渡动画结束后，才会开始宽度过渡动画，下边框也才会出现颜色变化。
这样就能把他们的过渡动画衔接在一起，体现到元素的 border 之上
利用同样的原理，我们再把元素的另外一个伪元素也利用上，但是他们的动画时间，整体需要再全部加上 0.5 秒，等到上述的过渡动画执行完毕后才执行：
div::after {
right: 0;
bottom: 0;
}
div:hover::after{
transition: height .25s, width .25s, border-top-color .25s;
transition-delay: 0.5s, 0.75s, 0.75s;
width: 200px;
height: 64px;
border-top: 3px solid #00e2ff;
border-right: 3px solid #00e2ff;
}
动态改变 transition-duration
还有一个非常有意思的技巧，我们可以利用元素的一些伪类，动态的去改变元素的 transition-duration。
举个例子：
div {
width: 140px;
height: 64px;
border: 2px solid red;
transition: 3s all linear;
}
div:hover {
transition-duration: .5s;
border: 2px solid blue;
}
当鼠标 hover 元素时，将元素的过渡动画的持续时间 transition-duration 从 3s 改成 0.5s，这样可以做到元素 hover 的时候，过渡动画持续的时间是 0.5s，但是过渡复位的持续时间却是 3s：
网友评论