CSS3过渡属性transition

transition的属性

属性能够分开写，也能够放在一块儿写

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

 

html代码

<div class="content">
        <div class="allpic">
            <div class="pic pic1">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic2">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic3">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic4">
                <img src="703.jpg" width="150px" height="150px">
            </div>
        </div>
    </div>

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规则，只能定义一个属性的变化，不能涉及多个属性。 

CSS Animation就是为了解决这些问题而提出的。（见下章）