css3过渡

DEMO1

img {
width: 192px;
height: 108px;
/*transition:5s height,5s 1s width;*/ /*height过渡后 延迟一秒width开始过渡，过渡时间为5s*/
/*transition:5s height,1s width;*/ /*height5秒过渡完成，width1秒过渡完成*/
/*transition: 5s;*/
/*transition-delay:5s;*/ /*延迟5s执行过渡*/
/*
linear->匀速
ease(默认)-> 先加速，后减速
ease-in->加速
ease-out->减速
cubic-bezier(n,n,n,n)->自定义
*/
transition: 5s ease;
}

img:hover {
width: 960px;
height: 540px;
}

DEMO2

div {
width: 100px;
height: 100px;
background:#00ff21;
transition: width 2s,height 2s;
-webkit-transition:width 2s,height 2s,-webkit-transform 2s;/* Safari and Chrome */
}

div:hover {
width: 200px;
height: 200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}

过渡属性：