//设置过渡的属性
transition-property：none | all默认值 | 具体属性名称
//可动画属性列表  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

//过渡花费的时间
transition-duration:默认0   s秒 ms 毫秒
//运动曲线
transition-timing-function: 
                            linear 匀速 线性过渡
                            ease  平滑过渡
                            ease-in 加速  由慢到快 
                            ease-out 减速  由快到慢 
                            ease-in-out 加速然后减速 由慢到快再到慢
                            steps(1,start|end) start看不见第一帧,end看不见最后一帧
                            step-start 等同于step-start(1,start)
                            step-end   等同于step-start(1,end)
                            cubic-bezier() 贝塞尔曲线 // http://cubic-bezier.com/#.41,1.77,.6,-0.13
//过渡开始前等待的时间
transition-delay: 默认0
//简写属性
transition：all 0.5s ease 0s ;

JS过渡完成事件

h1.addEventListener( 'transitionend' , function(){ .... }); 在每个property属性发生过渡时都会触发一次事件

过渡的坑:  
        1.元素在首次渲染没有完成时不会触发过渡 (window.onload可以解决), 触发过渡事件时 改变property成员出现的超出预期问题 
        2.在绝大部分transform样式切换时,如果transform :函数的位置 或者个数不相同也不会触发过渡