css3_實現動畫設置其過渡過程中的效果_transition

規定div區域 當鼠標放上去後由寬度100px變爲200px

div{width:100px;}
div:hover{width:200px;}

設置寬度100px到200px變化過程的過渡效果【設置width變化的過渡效果，過渡時間爲2s，以相同速度運行（linear），延遲1s開始】

div{width:100px;
transition:width 2s linear 1s;
-moz-transition:width 2s linear 1s; /* Firefox 4 */
-webkit-transition:width 2s linear 1s; /* Safari and Chrome */
-o-transition:width 2s linear 1s; /* Opera */
}

說明：

transition: property duration timing delay;

property	設置過渡效果的 CSS 屬性名稱。【如width等,默認值all】
duration	完成過渡效果的時間
timing	速度效果的速度曲線【如linear,easa等】
delay	過渡效果延遲開始時間