过渡和2d效果

过渡就是给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是没有过渡效果的，不要加错了，切记