过渡动画（transition）

过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。

所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。

语法：

transition-property:none | all | property    规定应用过渡的css属性的名称

transition-duration:time    过度效果花费的时间,

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n)规定过渡效果的时间曲线，

          linear      匀速

          ease        缓慢的开始，变快，缓慢的结束,默认

          ease-in    缓慢的开始，快的结束

          ease-out    快的的开始，缓慢的结束

          ease-in-out 缓慢的开始，缓慢的结束与ease不同的是速率的不同

          cubic-bezier(n,n,n) 在函数中定义值0-1

transition-delay:time规定效果何时开始，默认为0

简写属性：

transition:property duration timing-function delay

如果想要同时过渡多个属性，可以用逗号隔开，如：

-webkit-transition:width 5s linear,background-color 3s ;

大小eg:

#block{

width:100px;       height:100px;         background-color:antiquewhite;

-webkit-transition-property:width,height;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:0.5s;

}

#block:hover{

width:300px;      height:300px;         

}

位置eg:

#div1{

width:100px;          height:100px;      background-color:black;

position:absolute;

left:10px;

-webkit-transition:left   2s linear;//margin-left效果相同 

}

#div1:hover{

left:100px;

}

颜色eg：

#div3{

width:100px;  height:100px;

background-color:antiquewhite;

-webkit-transition:background-color   2s linear;

}

#block:hover{

background-color:black;

}

变形（transform）eg:

img{

width:300px;

transition:all   1s;      /*使悬停时照片慢慢的变化，不生硬*/

opacity:0.5;

}

img:hover{

---

transform:scale(1.2,1.2);    

transform:rotate(9deg);//两个transform效果，这样写法只会执行下面那个，CSS 是层叠样式表

---

transform:rotate(360deg) scale(1.2,1.2) skew(10deg,5deg)；//三个transform效果同时进行

---

opacity:1;

}

都执行