过渡就是给css单个或者是多个的属性产生的变动过程增加一个过程，时长的规定看我的项目需要
个别应用简写语法
transition：all这里的all代表选中所有的属性值 5s s代表秒，也能够用ms，1秒等于1000ms，所以不举荐用ms
个别写上transition：all 5s；就能够有一个简略的过渡了，
依据需要写过渡应该在哪里，如果是鼠标指向的话就加在hover的上面，如果过渡后须要回来也有过渡动画就须要
加在须要过渡动画的元素里
例:
div{
width: 100px;height: 100px;
border：1px solid red；
transition：all 3s；
}
div：hover{
left：300px；
}
这样就是鼠标指向后有一个过渡，也有一个回来的过渡动画。
div{
width: 100px;height: 100px;
border：1px solid red；
}
div：hover{
left：300px；
transition：all 3s；
}
像这样增加就是一旦鼠标移开该div，div会立马回到原点。
过渡动画的减速过程是能够本人定义的，一共是七种。
例：
css局部：
ul{
list-style-type: none; padding: 0;margin: 0; border: 1px solid #f00;}ul li{ width: 200px; height: 20px; line-height: 30px; background-color:#f00; margin: 2px 0; }ul li:nth-child(1):hover{ width: 500px; transition: all 5s linear;}ul li:nth-child(2):hover{ width: 500px; transition: all 5s ease;}ul li:nth-child(3):hover{ width: 500px; transition: all 5s ease-in;}ul li:nth-child(4):hover{ width: 500px; transition: all 5s ease-out;}ul li:nth-child(5):hover{ width: 500px; transition: all 5s ease-in-out;}ul li:nth-child(6):hover{ /* 贝塞尔曲线，是利用一些比较复杂的数学公式 */ width: 500px; transition: all 5s cubic-bezier(0.075, 1.650, 0.165, -0.600);}ul li:nth-child(7):hover{ width: 500px; transition: all 5s steps(7);}html局部：
<ul>
<li>linear 匀速</li> <li>ease 加速</li> <li>ease-in 减速</li> <li>ease-out 加速</li> <li>ease-in-out 先减速后加速</li> <li>贝塞尔曲线</li> <li>分步骤</li></ul>每一个我都写好了该语法的减速过程，至于效果图能够拿下本人试试看啦。
对了，补充一点，display是没有过渡成果的，不要加错了，切记