動畫運動曲線是指動畫元素在運動過程中,速度和方向的變化方式。在 CSS 中,我們可以利用 transition 和 animation 屬性來實現動畫效果。在這兩個屬性中,都可以指定運動曲線。
/* transition 屬性實現動畫效果 */ /* ease-in-out 為運動曲線 */ div { transition: width 2s ease-in-out; } /* animation 屬性實現動畫效果 */ /* cubic-bezier() 為運動曲線 */ @keyframes myAnimation { from { transform: translateX(0); } to { transform: translateX(100px); } } div { animation: myAnimation 2s cubic-bezier(.5, 0, .5, 1); }
在 CSS 中,我們可以使用四種預設曲線:ease、ease-in、ease-out、ease-in-out。這些曲線分別表示整個動畫過程中速度變化的情況。其中,ease 為默認曲線。
/* 采用 ease 運動曲線 */ div { transition: width 2s ease; }
如果預設的曲線不滿足我們的需求,還可以使用 cubic-bezier() 函數來自定義運動曲線。這個函數需要指定 4 個值,分別對應于動畫過程中的 4 個關鍵點。這 4 個值的取值范圍為 0-1。
/* 采用自定義運動曲線 */ div { transition: width 2s cubic-bezier(.5, 0, .5, 1); }
在實際應用中,我們可以通過不斷調整運動曲線的值來實現不同的動畫效果。比如,我們可以通過使用 ease-in-out 運動曲線來實現平滑的過渡效果,或者通過使用 ease-in 曲線來強調動畫的開始階段。