css過渡動畫淺析

CSS過渡transition

transition-property: 過渡屬性(默認(rèn)值為all)

transition-duration: 過渡持續(xù)時間(默認(rèn)值為0s)

transiton-timing-function: 過渡函數(shù)(默認(rèn)值為ease函數(shù))

transition-delay: 過渡延遲時間(默認(rèn)值為0s)

觸發(fā)動畫幾種情況

點擊一個按鈕,觸發(fā)另一個地方開始過渡動畫

在點擊事件中寫出css變化后的值即可

鼠標(biāo)覆蓋觸發(fā)過渡動畫

在css中 :hover寫出css變化后的值 即可

CSS過渡animation

animation: bottom_ 1s forwards;

@keyframes bottom_ {

????0%{bottom:-303px;}

????100%{bottom:0px;}

}

設(shè)置好動畫開始與結(jié)束即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容