【css3】过渡

一.过渡的触发：

JavaScript或者：hover，：fouces，：active、：target、：checked伪类

二.步骤：

默认样式为元素初始状态，声明最终状态，默认样式中添加过渡函数和不同样式

三.参数

• transition-property 要改变的css属性 (all 所有改变的属性都过渡)
• transition-duration 用多久执行完
• transition-timing-function 过渡函数
• transition-delay 多久后开始执行 （1s）
  transition : <过渡属性> <过渡所需时间> <过渡动画函数> <过渡延迟时间>
  ：all 2s linear .5s;
  transition属性要加在原生元素上

四.过渡函数

1. 三次贝塞尔曲线
   可以使用工具生成三次贝塞尔曲线 transition-timing-function：（P1x , P1y , P2x , P2y）谷歌自带的有调整的曲线工具
2. step（）函数

五.过渡延迟时间

1.若为负数则从现在开始，之前时间的动作被截断

六.媒体查询触发

@media only screen and (max-width: 960px){
        /*过度后的状态*/            
    }

七.不同浏览器对于过渡属性的不同

如Safari中padding属性还会触发font-size、line-height属性
只有webkit内核浏览器可以执行auto属性
不同过渡属性的不同值是否支持过渡也不同，margin-top属性为长度时支持，百分比时不支持
隐式过渡

八.无限延迟的过渡

 设置transition-delay为999999s

九.硬件加速

 -webkit-transfrom : translate( 0 )