介绍
详见：
https://www.runoob.com/cssref/css3-pr-transition.html
transition 属性
过渡效果，四个简写属性为：
- transition-property：指定哪些属性有过渡效果
- transition-duration：过渡效果需要多长时间完成，默认是0，
s、ms transition-timing-function：过渡效果
- ease：默认值，慢速开始，然后加速，然后慢速结束（cubic-bezier(0.25,0.1,0.25,1)）。
- linear：以相同速度开始至结束（等于 cubic-bezier(0,0,1,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 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay：延迟多长时间开始过渡效果，默认是0
合起来写
transition: property duration timing-function delay;
例子-一个属性过渡效果
改变宽度，过渡时间为2s
css：
<style>
div
{
width:100px;
height:100px;
background:red;
/* 只改变宽度，2秒完成 */
transition:width 2s;
}
/*鼠标放到div，会改变高宽*/
div:hover
{
width:300px;
height:200px;
}
</style>
html：
<div></div>
例子-多个属性实现过渡效果
css：
<style>
.box{
width: 200px;
height: 150px;
background-color: skyblue;
transition: width 2s,height 2s;
}
.box:hover{
width: 500px;
height: 300px;
}
</style>
html：
<div class="box"></div>
例子-移动坐标
<style>
.box{
width: 200px;
height: 150px;
background-color: skyblue;
/* 当触发过渡时，宽度持续过渡2s，其他属性瞬间改变 */
/* transition: width 2s,height 2s; */
transition: transform 2s;
transition-timing-function: ease;
transition-delay: 1s;
}
.box:hover{
/* 改变坐标 */
transform: translate(300px,0px);
}
</style>
<div class="box"></div>