transition过渡动画

transition语法格式：transition: property duration timing-function delay;
  代码示例：transition:width 2s ease-in 500ms;


知识点一：transition-property 规定设置过渡效果的 CSS 属性的名称。 
        语法格式：transition-property: none|all|property;
        注意事项：只设置这一个无效果，因为默认动画时长是0.需要配合时长最终效果等一块设置才有效。
        参数说明：
            none 没有属性会获得过渡效果。 
            all 所有属性都将获得过渡效果。 
            property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 
        代码示例：transition-property:width,height; 
        JS中调用方法：object.style.transitionProperty="width,height";
        练习题目：
            请练习 transition-property:all;与transition-property:none;的情况


知识点二：transition-duration 规定完成过渡效果需要多少秒或毫秒。默认值是 0不会有效果。
        语法格式：transition-duration:时间长度;
        代码示例：transition-duration:5s; 这里单位一定要带上，5秒的意思。 1秒= 1000毫秒
                          transition-duration:5000ms; 这里单位是毫秒的意思。单位不可省略。    
        JS中调用方法：object.style.transitionDuration="5s"


知识点三：transition-timing-function 规定速度效果的贝塞尔曲线。 
        语法格式：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 
        参数说明：
            linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 
                ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,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) 课在函数中定义自己的值。取值范围0 至 1 之间的数值。 
        代码示例：
            transition-timing-function: ease-in-out;      
        transition-timing-function: cubic-bezier(0,0,1,1);          
        JS中调用方法：object.style.transitionTimingFunction="linear"
        关于贝塞尔曲线见专题说明文档,供大家业余学习。
        
知识点四：transition-timing-function 的特殊值
        transition-timing-function : 还可以有值： step-start | step-end | steps(<integer>[, [ start | end ] ]?)
        steps函数
        step-start：等同于 steps(1, start)
        step-end：等同于 steps(1, end)
        steps(<integer>[, [ start | end ] ]?)：
        接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，
        指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
        

知识点五：transition-delay 定义过渡效果何时开始，单位是秒或者毫秒。 
    语法格式：transition-delay:多长时间后开始
    代码示例：transition-delay:5s;     秒   1秒= 1000毫秒
                      transition-delay:500ms;  毫秒    
        JS中使用方法：object.style.transitionDelay="2s" 


案例：
        可以为同一元素的多个属性定义过渡效果。 
        transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：
    transition-property:border-color, background-color, color;
    transition-duration:.5s, .5s, .5s;
    transition-timing-function:ease-in, ease-in, ease-in;
    transition-delay:.1s, .1s, .1s;