css transition

css transition
 

• 可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果
• 过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0
• 不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

语法 

• transition
• transition-property 属性
• transition-duration 过渡持续时间
• transition-function 过度时间函数
• transition-delay    过度延迟时间

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition；1s 2s; /*代表持续时间为2s，延迟时间为默认值0s*/
}    
.test:hover{
    width: 500px;
}

 transition  时间过度函数

cubic-bezier()

• ease  相当于cubic-bezier(0.25,0.1,0.25,1)
• ease-in  相当于cubic-bezier(0.42,0.1,1,1)
• ease-out  相当于cubic-bezier(0,0,0.58,1)
• ease-in-out  相当于cubic-bezier(0.42,0,0.58,1)
• linear  cubic-bezier(0,0,1,1)

steps()

• step-start  相当于 steps(1,start)
• step-end  相当于 steps(1,end) 

多值 

#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

过度方式

• 过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发
• 过渡分为两个阶段：前进阶段和反向阶段
• 过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次
• 如果过渡属性是复合属性  例如 border   则是4次触发
• 如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数
• 如果过渡延迟时间为负值，且绝对值大于等于过渡持续时间时，低版本webkit内核浏览器不会产生过渡效果，但会触发过渡事件；
• 而其他浏览器即不会产生过渡效果，也不会触发过渡事件
• 低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次
   

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

/*事件触发*/
test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}