CSS-过渡效果-transition

1， 什么是过渡效果
    使得CSS的属性值在一段时间内平缓变化的一个效果
    例如颜色的渐变式变化是突变还是渐变，
        字体大小变化，位置变化等
2， 语法
    1，指定过渡属性
        作用：指定哪个属性值在变化的时候使用过渡效果；
        属性：transition-property    (过渡属性)
        取值：
            1， 属性名称
            2， all
                但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
                允许使用过渡效果的属性：
                    1，所有与颜色相关的属性
                    2，所有取值为数字的属性
                eg:
                    transition-property:background-color;
    2， 指定过渡时长
        作用： 指定在多长时间内完成过渡效果
        属性： transition-duration
        取值： 以s或ms为单位的数字
        eg:
            transition-duration:0.3s;
    3， 指定过渡的速度时间曲线函数
        作用：指定过渡效果变化速率
        属性：transition-timing-function
        取值： 
            1， ease
                默认值， 慢速开始，快速变快，慢速结束
            2， linear
                匀速
            3， ease-in
                慢速开始，加速结束
            4,  ease-out
                快速开始，减速结束
            5， ease-in-out
                慢速开始和结束，中间先加速后减速
    4， 指定过渡延迟
        作用：当激发过渡效果后，等待多长时间再开始操作
        取值： s或ms为单位的数字
    
    
    5， 过渡属性简写
        属性： transition
        取值： property duration timing-fun delay
        eg:
            transition: color 5s linear, font-size 3s linear;

练习:  200*200 red渐变为 400*400 yellow