transition为css3加入新特性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: red; margin:100px auto; /* 过渡的属性详解*/ /* 过渡属性*/ /* 如果希望所有的属性都发生过渡 使用过all*/ transition-property: all; /* 过渡持续时间*/ transition-duration:4s; /* 运动曲线*/ /* linear 线性 ease ease-in ease-out ease-in-out :先加速后减速 */ transition-timing-function: ease-in-out; /* 过渡延迟*/ transition-delay: 1s; /* 简写*/ transition:width 4s ease-in-out 0s; } .box:hover{ width: 600px; } </style> </head> <body> <div class="box"></div> </body> </html>