过渡的基本概念

 概念、

语法、

transition-property: css属性名称; /* 表示要产生过渡效果的css属性，多个属性使用逗号隔开。
也可以写all，表示所有属性 */
transition-duration: 数字s; /* 表示完成过渡效果需要的时长 */
transition-timing-function: 速度方式; 
/* 
    linear 表示匀速 
    ease 逐渐减速 - 一开始比较快
    ease-in 逐渐加速
    ease-out 逐渐减速 - 一开始没有ease快
    ease-in-out 先加速后减速
    cubic-bezier()  专门用于设计速度方式的贝塞尔曲线
    steps()  分步骤动画
*/
transition-delay: 数字s; /* 表示延迟多少秒执行过渡效果 */
transition: 值； 

transition的取值：是单一写法的4个值的组合，用空格隔开。第一个秒数表示过渡效果需要使用的时间，第二个秒数表示延迟多长时间后执行。

例

<style>
    .big{
        width: 500px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
    }
    .small{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        t