有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等transition-duration:time[,time]*：指定对象过渡的持续时间transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。五种预留特效：transition-timing-function是transition属性里最为复杂的一个，针对的是过度效果的特效。也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内。

(1)transition-property规定应用过渡的CSS属性的名称。

(2)transition-duration定义过渡效果花费的时间。默认是0。

(3)transition-timing-function规定过渡效果的时间曲线。默认是“ease”。

transition的属性

属性可以分开写，也可以放在一起写

常用写法：transition：transform（名称） 1.2s（过渡时间） linear（过渡方式） 2s（过渡开始时间）

 

html代码

css代码

*{  margin: 0px;padding: 0px;  }
.content{
    width: 80%;  height: 700px;  margin: 0 auto;  background-color: aqua;
}
.allpic{
    width: 800px;  height: 700px;  margin: 0 auto;
}
.pic{
    float: left;  padding: 5px;  margin: 15px;  border: 1px solid darkgray;
}
/*CSS过渡*/.pic1{
    transition: transform 1.2s linear;
}
.pic1:hover{
    transform: rotate(180deg);
}

.pic2{
    transition: transform 1.2s linear;
}
.pic2:hover{
    transform: scale(1.2);
}

.pic3{
    transition: transform 1.2s linear;
}
.pic3:hover{
    transform: skew(60deg);
}

.pic4{
    transition: transform 1.2s linear;
}
.pic4:hover{
    transform: translate(10px);
}

注：此处省略了浏览器兼容性代码，方便细看

 

属性详解

transition-property

不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。见http://leaverou.github.io/animatable/

 

transition-duration

指定从一个属性到另一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果。

 

transiton-timing-function

过渡函数，有如下几种：

     Ease：首尾变缓。

     Linear：线性变化。

     Ease-in：开始慢，后面快。

     Ease-out：开始块，后面慢。

     Ease-in-out：首尾慢，中间快。

     cubic-bezier：三次贝塞尔曲线，自定义（不太懂）

 

触发过渡（重要）

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： 
:hover :focus :checked 媒体查询触发 JavaScript触发

 

局限性

transition的优点在于简单易用，但是它有几个很大的局限。 
（1）transition需要事件触发，所以没法在网页加载时自动发生。 
（2）transition是一次性的，不能重复发生，除非一再触发。 
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 

属性：transition
（1）transition-property规定应用过渡的CSS属性的名称。
（2）transition-duration定义过渡效果花费的时间。默认是0。
（3）transition-timing-function规定过渡效果的时间曲线。默认是“ease”。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果。
linear规定以相同的速度开始至结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果。
transition-delay规定过渡效果何时开始。默认是0。
transition:[transition-property] || [ transition-duration] || [transition-timing-function ] || [ transition-delay]简写属性，用于在一个属性中设置四个过渡属性。

transition简写属性，用于在一个属性中设置四个过渡属性。

transition-property规定应用过渡的 CSS 属性的名称(默认为all)。

transition-duration定义过渡效果花费的时间。默认是 0s。

transition-timing-function规定过渡效果的时间曲线。默认是 "ease"函数。 

transition-delay规定过渡效果何时开始。默认是 0s。