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