在CSS動畫中,控制動畫停在特定位置可以使動畫效果更加精細。一般來說,我們可以通過調整CSS屬性值以及動畫延遲設置達到這個目的。
下面是一個例子,演示如何通過調整動畫延遲使動畫停在指定位置:
.box { width: 100px; height: 100px; background: red; animation: move 2s ease forwards; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(200px); } }
在該例子中,動畫首先沿著 x 軸向右移動,達到 transform: translateX(200px) 的位置。我們可以通過設置 animation-delay,使動畫延遲兩秒鐘來停在這個位置,代碼如下:
.box { width: 100px; height: 100px; background: red; animation: move 2s ease forwards; animation-delay: 2s; }
如果我們想要的是動畫停止在半路,我們可以通過改變 keyframe 關鍵幀的位置來實現。下面是一個演示動畫在 50% 處停止的示例:
.box { width: 100px; height: 100px; background: red; animation: move 2s ease forwards; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(200px); } 51% { transform: translateX(100px); } }
在 keyframe 中,我們添加了一個新的關鍵幀 51%,它的 transform 值為 translateX(100px)。這樣,當動畫執行到這里時,就會停止在這個位置。
總之,在 CSS 動畫中控制停止位置是一個非常有用的技巧,需要根據具體情況選擇不同的方法來實現。