CSS正時(shí)功能控制動(dòng)畫(huà)起搏。 1。線性確保恆定速度，適用於機(jī)械過(guò)渡。 2。輕鬆啟動(dòng)緩慢，加快速度，然後再次減慢，非常適合自然UI相互作用。 3。輕鬆從緩慢的開(kāi)始加速，非常適合逐漸的入口。 4。末端減速，可用於平滑出口。 5。易於插入兩者，非常適合平衡雙向動(dòng)畫(huà)。選擇合適的一個(gè)取決於上下文，並且可以使用Cupic-Bezier（）創(chuàng)建自定義曲線。

CSS中的時(shí)序功能（例如ease ， linear和ease-in-out控制了CSS過(guò)渡或動(dòng)畫(huà)的中間值如何隨著時(shí)間的推移計(jì)算。用更簡(jiǎn)單的話來(lái)說(shuō)，它們定義了動(dòng)畫(huà)從頭到尾進(jìn)行的速度，使其感覺(jué)光滑，突然或自然。

正時(shí)功能實(shí)際上是什麼？

在他們的核心方面，定時(shí)功能（也稱(chēng)為寬鬆功能）決定了動(dòng)畫(huà)的起搏。他們不會(huì)更改動(dòng)畫(huà)的起點(diǎn)或終點(diǎn)，而只是元素如何到達(dá)那裡。將它們視為不同的駕駛風(fēng)格：一個(gè)可能會(huì)緩慢加速並突然停止（ ease-in ），另一個(gè)可能以恆定的速度（ linear ）進(jìn)行，而另一個(gè)可能會(huì)開(kāi)始緩慢，加快加速，然後再次慢慢降低（ ease-in-out ）。

解釋了常見(jiàn)的計(jì)時(shí)功能

1。 linear - 穩(wěn)定且可預(yù)測(cè)

這是最直接的計(jì)時(shí)函數(shù)。動(dòng)畫(huà)從頭到尾都以恆定的速度移動(dòng) - 無(wú)加速，沒(méi)有放緩。

• 適合您想要一致運(yùn)動(dòng)的簡(jiǎn)單過(guò)渡
• 通常用於需要感覺(jué)到機(jī)械或精確的滑塊或進(jìn)度條

例子：

過(guò)渡：所有0.5S線性；

您可能會(huì)注意到這可能會(huì)感覺(jué)有點(diǎn)機(jī)器人或不自然，尤其是對(duì)於UI動(dòng)畫(huà)而言，這意味著要感覺(jué)光滑。

2。 ease - 默認(rèn)和自然

這是大多數(shù)瀏覽器中的默認(rèn)設(shè)置。它啟動(dòng)稍慢，加快加速，然後在末端放慢速度。

• 更緊密地模仿現(xiàn)實(shí)世界的運(yùn)動(dòng)
• 感覺(jué)比linear更有機(jī)，更刺耳
• 適用於大多數(shù)UI相互作用，例如懸停效果或模態(tài)入口

例子：

過(guò)渡：不透明度0.3s易於;

除非您有使用其他功能的特定原因，否則這是一個(gè)很好的起點(diǎn)。

3。 ease-in - 開(kāi)始緩慢，快速完成

動(dòng)畫(huà)開(kāi)始緩慢，然後加速直至結(jié)束。

• 可以創(chuàng)造一種期待感
• 不太常見(jiàn)，因?yàn)樗罱K會(huì)突然
• 當(dāng)您希望某些東西逐漸出現(xiàn)但很快消失時(shí)有用

用例：

• 不需要軟著陸的褪色
• 從屏幕外進(jìn)入屏幕的元素

4。 ease-out - 快速開(kāi)始，慢速完成

開(kāi)始快速，然後朝著末端減速。

• 在出口動(dòng)畫(huà)上感覺(jué)更順暢
• 使元素覺(jué)得自己安頓到位
• 通常用於隱藏或刪除元素

例子：

過(guò)渡：變換0.4S易於啟動(dòng)；

這一效果很好，就像一扇門(mén)快速打開(kāi)後輕輕關(guān)閉。

5。 ease-in-out - 平衡的加速與減速

結(jié)合ease-in和ease-out 。開(kāi)始緩慢，在中間加速，然後在末端再次減慢。

• 最常用的對(duì)稱(chēng)動(dòng)畫(huà)
• 感覺(jué)平衡和拋光
• 非常適合切換狀態(tài)（例如打開(kāi)和關(guān)閉菜單）

例子：

過(guò)渡：寬度0.6s易於入口；

因?yàn)樗菍?duì)稱(chēng)的，所以當(dāng)兩個(gè)方向都使用相同的動(dòng)畫(huà)時(shí)，它可以很好地工作。

如何選擇合適的一個(gè)

沒(méi)有單一的“最佳”計(jì)時(shí)功能 - 這取決於您的動(dòng)畫(huà)和希望它的感覺(jué)。以下是一些實(shí)用技巧：

• ？使用ease-in-out通用動(dòng)畫(huà)，需要在兩個(gè)方向上保持光滑。
• ??如果您想要統(tǒng)一運(yùn)動(dòng)，請(qǐng)嘗試linear ，但請(qǐng)注意，它可能會(huì)感到人造。
• ？使用ease-in來(lái)進(jìn)行戲劇性的入口，並ease-out出口。
• ？不要害怕在瀏覽器開(kāi)發(fā)工具中測(cè)試不同的選項(xiàng) - 您通常會(huì)看到差異比您想像的要好。

獎(jiǎng)金：使用cubic-bezier()自定義放鬆

如果內(nèi)置的不正確，則可以使用cubic-bezier()來(lái)定義自己的定義。

例如：

過(guò)渡：所有0.4s立方晶體（0.25、0.1、0.25、1）;

這使您可以完全控制加速曲線。諸如cupic-bezier.com之類(lèi)的工具使您可以直觀地調(diào)整曲線並將值複製到代碼中。

這是定時(shí)功能背後的基本思想。它們塑造了動(dòng)畫(huà)的節(jié)奏，一旦您感覺(jué)到它們，您就會(huì)根據(jù)要?jiǎng)?chuàng)建的運(yùn)動(dòng)方式開(kāi)始更故意選擇它們。

以上是什麼是定時(shí)功能（舒適，線性，輕鬆入門(mén)等）？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！