在CSS動(dòng)畫中,我們常常需要讓元素先減速運(yùn)動(dòng),然后再加速到目標(biāo)位置。這種效果可以通過CSS屬性來(lái)實(shí)現(xiàn)。
.box { animation-name: speed; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-duration: 2s; } @keyframes speed { 0% { transform: translateY(-100px); } 60% { transform: translateY(30px); } 100% { transform: translateY(0); } }
上述代碼中,我們使用了cubic-bezier函數(shù)來(lái)定義了一個(gè)先減速后加速的運(yùn)動(dòng)軌跡。函數(shù)的四個(gè)參數(shù)分別代表起點(diǎn)、控制點(diǎn)1、控制點(diǎn)2及終點(diǎn)的坐標(biāo),這里我們定義了一個(gè)淡入淡出的動(dòng)作。
animation-timing-function屬性可以讓動(dòng)畫效果更為流暢,可以像例子中一樣使用cubic-bezier函數(shù)來(lái)自定義運(yùn)動(dòng)軌跡,也可以使用ease-in-out等內(nèi)置的運(yùn)動(dòng)模式。
animation-duration屬性定義了動(dòng)畫的持續(xù)時(shí)間,我們?cè)O(shè)置為2s,也可以根據(jù)具體需求調(diào)整。在我們的例子中,元素先沿Y軸負(fù)方向運(yùn)動(dòng)100px,然后在到達(dá)60%的時(shí)候向Y軸正方向運(yùn)動(dòng)30px,最后到達(dá)目標(biāo)位置。
這就是如何使用CSS來(lái)實(shí)現(xiàn)元素先減速后加速的運(yùn)動(dòng)效果。通過巧妙地應(yīng)用animation-timing-function和animation-duration屬性,我們可以輕松地創(chuàng)造出各種動(dòng)態(tài)效果,讓網(wǎng)頁(yè)更加生動(dòng)有趣。