在CSS3中,我們可以使用動畫來創建各種華麗的效果,但有時候我們需要讓動畫停在最后的狀態而不是重新開始,這時候該怎么做呢?我們可以使用以下方法:
/* 設置動畫結束后保持最后狀態 */ animation-fill-mode: forwards;
通過設置animation-fill-mode
屬性為forwards
,我們可以讓動畫在結束后保持最后的狀態不發生回滾。下面是一個例子:
/* 創建一個向上移動的動畫 */ @keyframes moveUp { from { transform: translateY(0); } to { transform: translateY(-50px); } } /* 設置動畫持續時間、結束保持最后狀態 */ .box { animation-name: moveUp; animation-duration: 2s; animation-fill-mode: forwards; }
在上面的例子中,我們創建了一個向上移動的動畫,并通過animation-fill-mode
屬性設置了結束后保持最后狀態。這樣,當動畫結束時,元素將停留在向上移動50像素的位置上。
上一篇css3動畫入門效果
下一篇css3動畫從右向左