在CSS中,可以通過transition-timing-function
屬性來設(shè)置動畫的緩動效果。該屬性接受一個回調(diào)函數(shù),該函數(shù)定義了動畫開始、中間和結(jié)束時的速度曲線。
以下是設(shè)置不同緩動效果的示例代碼:
.transition {
transition-timing-function: linear;
}
.transition {
transition-timing-function: ease;
}
.transition {
transition-timing-function: ease-in;
}
.transition {
transition-timing-function: ease-out;
}
.transition {
transition-timing-function: ease-in-out;
}
除了以上內(nèi)置的緩動函數(shù)外,還可以使用cubic-bezier()
函數(shù)自定義緩動效果。該函數(shù)接受4個參數(shù),分別表示控制點的x和y坐標(biāo),范圍在0到1之間。例如,以下代碼將創(chuàng)建一個自定義的緩動效果:
.transition {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
這將創(chuàng)建一個類似于“ease-in-out”的緩動效果,但具有不同的控制點。