这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
CSS过渡
我们都用过hover和active这种伪类属性，我们用trasnsition也可以使用这种过渡效果。而且transition属性也不需要增加私有前缀了。transition是一个常用属性也是一个缩写，是由transition-duration、transition-delay、transition-property、transition-timing-function这四种css缩写而成的。
transition-duration属性表示过渡时间，它不能是负值，但是可以为0，transition: 2s 4s第一个值表示过渡时间，第二个值表示延时时间，这两个值是固定的，不能调换顺序，否则意思会颠倒过来。
当我们如果写了负值，可能就会无序排列，例如：
transition: 3s -1s;
transition: -1s 3s;
上面这两种效果是一样的，原因就是因为transition-duration不能是负值，所以代码中的-1只能是transition-duration的属性值，两个值就可以无序排列。
transition-delay用来指定延时过渡效果执行的时间，单位可以是秒或者毫秒，也可以为负值。当属性值为负值的时候，就可以节省部分动画进程。
.wrapper {
transform: translateX(0);
transition-duration: 2s;
transition-delay: -1s;
}
.wrapper:hover {
transform: translateX(200px);
}
当鼠标经过wrapper元素的时候，元素的位移不是从0开始，而是从100px的位置开始的。而且对应的过渡时间也是1s而不是2s，最终过渡执行的时间等于动画过程时间加延时时间。而且我们还可以利用这个过渡效果延迟时间当我们鼠标经过图片的时候不会立即触发事件，我们可以设置触发事件的延迟时间。
transition-property用来设置应用过渡效果的CSS属性，初始值为all，默认所有的CSS属性都具有应用过渡效果。不是所有的元素都支持过渡效果，display属性就不支持过渡效果，而且当我们同时设置了display:none和transition效果时，display会将过渡效果瞬间中断，导致transitionend事件不会触发。如果我们希望有过渡效果而且同时可以隐藏，我们可以使用visibility属性，visibility属性在transition过渡效果中比较实用。如果transition-property的属性值列表长度过短，其他过渡属性多余的列表值会被忽略。transition缩写属性也支持逗号分割多个独立的过渡效设置。
transition-timing-function属性通过设置过渡时间函数来影响过渡效果的过渡速率，transition-timing-function属性和animation-timing-function支持的属性值的类型是一致的。有三种：线性运动类型，用linear表示。三次贝塞尔时间函数(ease、ease-in、ease-out、ease-in-out)等关键字和cubic-bezier()函数。步进时间函数类型(step-start)等关键字和step()函数。而且transition-timing-function属性用的地方比较少，一般使用默认值ease就可以在所有的场景中使用了。
