CSS3----transition

transition-property 

none 没有属性改变

all 所有属性改变，默认值

porperty元素属性名

例子

div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
}
div:hover { cursor: pointer; transform: rotate(180deg);
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
}

 

transition-duration   过渡的持续时间 

-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;

 

transition-timing-function   过渡方法

ease平滑过渡（默认）　　　　linear线性过渡　　　　ease-in由慢到快　　　　ease-out由快到慢　　　　ease-in-out由慢到快再到慢　　----->这五个常用　　

step-start等同于（1，start）　　　　step-end等同于（1，end）　　　　step(<integer>[,start[end]]?)　　　　cubic-bezier(<number>,<number>,<number>,<number>)

-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;

 

transition-delay  延迟过渡时间

-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;

 

综合上述简写

transition：属性名transform  持续时间2s   过渡方法ease-in-out  延迟时间1s         顺序不能错

-webkit-transition: transform 2s ease-in-out 1s;
-moz-transition: transform 2s ease-in-out 1s;
-ms-transition: transform 2s ease-in-out 1s;
-o-transition: transform 2s ease-in-out 1s;
transition: transform 2s ease-in-out 1s;