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	过渡效果延迟开始时间