css3过渡动画

标签：duration   曲线   过渡效果   lin   function   height   web   log   linear   

div{
　　width:200px;
　　height:300px;
　　background:red;
　　transtion:width 2s height 2s ;
　　-webkit-transtion:width 2s height 2s;
　　-o-transtion:width 2s height 2s;
　　-moz-transtion:width 2s height 2s;
}
div:hover{
　　width:400px;
　　height:800px;
　　background:orange;
}

transtion:属性简写设置4个过渡属性。

transtion-property:规定过渡css属性名称

transtion-duration:规定过渡花费时间。默认为0

transtion-timing-function:规定过渡时间曲线。默认是ease

transtion-delay:规定过渡效果时间

transtion-timing-function规定过渡效果时间曲线。默认是ease

linear:线性过渡

ease:平滑过渡

ease-in:由慢到快

ease-out:由快到慢

ease-in-out:由慢到快在到慢

cubic-bezier: 贝塞尔曲线

css3过渡动画

标签：duration   曲线   过渡效果   lin   function   height   web   log   linear   

原文地址：http://www.cnblogs.com/nanianqiming/p/6279115.html