CSS中的關鍵幀動畫(@keyframes)可以讓我們實現許多動態效果。然而,由于默認情況下,動畫是使用ease緩動函數進行的;這意味著動畫會在其開始和結束時變得慢,而在動畫的中間時變得更快。如果您想要動作勻速,則需要使用線性緩動函數,即linear。
/* 設置動畫的關鍵幀 */ @keyframes example { 0% { opacity: 0; } 100% { opacity: 1; } } /* 指定動畫 */ .element { animation: example 2s linear; /* 持續2秒,勻速 */ }
在上面的示例中,我們創建一個簡單的透明度動畫,并使用linear緩動函數指定了勻速動畫。關鍵幀設置0%和100%的透明度,使得元素在開始和結束時都變為不透明。
此外,我們還可以使用同樣的方式為其他動畫屬性(如transform)指定線性緩動函數,使動畫在其持續時間內以恒定的速度進行。
雖然動畫的緩動函數可以為您提供更加自然的效果,但是使用線性緩動函數讓動畫勻速進行往往更加清晰和精確。