transition：過渡屬性詳解
阿新 • • 發佈：2020-08-13
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>