CSS3----過渡--整合
阿新 • • 發佈：2021-07-16
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; }body{ width: 60%; height: 60%; border: 1px solid; margin: 100px auto 0; } .test{ width: 200px; height: 200px; border-radius:50% ; background: #BBFFAA; text-align: center; font: 50px/200px "微軟雅黑"; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; /*transition是一個簡寫屬性，控制動畫的速度*/ /* transition: 2s; */ /*transition-property 指定應用過渡屬性的名稱*/ transition-property: width; /*transition-duration 指定過渡動畫所需時間 可指定多個時長，每個會應用到transition-property指定的對應屬性 指定時長個數小於屬性個數，時長列表會重複，反之時長列表更長，時長列表會被裁剪*/ transition-duration: 2s; } body:hover .test{ width: 100px; height: 100px; font: 30px/100px "微軟雅黑"; } </style> </head> <body> <div class="test"> 啦啦啦 </div> </body> </html>
transition 是一個簡寫屬性，控制動畫的速度
transition-property 指定應用過渡屬性的名稱
transition-duration 指定過渡動畫所需時間
可指定多個時長每個會應用到transition-proprety指定的對應屬性，指定時長個數小於屬性個數，時長列表會重複，反之時間列表更長，時間列表會被裁剪
過度運動形式與過渡延遲
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; } body{ width: 60%; height: 60%; border: 1px solid; margin: 100px auto 0; } .test{ width: 400px; height: 200px; /* border-radius:50% ; */ background: #BBFFAA; text-align: center; font: 50px/200px "微軟雅黑"; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; transition-property: width; transition-duration: 5s; /* transition-timing-function 用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況 cubic-bezier 貝塞爾曲線 屬性值： ease 預設值 加速然後減速 linear 勻速 ease-in 加速 ease-out 減速 ease-in-out 加速然後減速 step-start 等同於steps（1，start） step-end 等同於steps（1，end） steps(引數1,2) 第一個引數：正整數 第二個引數：發生變化的時間點（預設為end） */ transition-timing-function:steps(5,start); /*transition-delay 規定在過渡效果開始作用之前需要等待的時間*/ transition-delay: 3s; /* transition-property:background,width,height; transition-duration:3s,2s; transition-delay:3s,2s; transition-timing-function:linear; transition-property:background,width,height; transition-duration:3s,2s,3s; transition-delay:3s,2s,3s; transition-timing-function:linear,ease,ease; 當屬性值的列表長度不一致時 超出的情況下是會被全部截掉的 不夠的時候，關於時間的會重複列表， transition-timing-function的時候使用的是預設值ease */ } body:hover .test{ width: 100px; /* font: 30px/100px "微軟雅黑"; */ } </style> </head> <body> <div class="test"> 啦啦啦 </div> </body> </html>
transition-timing-function
用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況
屬性值： ease 預設值 加速然後減速
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out 加速然後減速
step-start 等同於steps（1，start）
step-end 等同於steps（1，end）
steps（引數1，引數2）第一個引數：正整數 第二個引數：發生變化的時間點（預設為end）