CSS可以通過屬性animation-fill-mode來讓動畫停在最后一幀。
animation-fill-mode: forwards;
animation-fill-mode有四種屬性值:
- none:動畫完成后回到初始狀態。
- forwards:動畫完成后停留在最后一幀狀態。
- backwards:在動畫執行之前,將元素設置為動畫的初始狀態。
- both:同時應用forwards和backwards的效果。
使用animation-fill-mode屬性時需要注意以下幾點:
- 需要在animation-duration或animation屬性中指定動畫所需的時間或次數。
- 如果動畫是無限循環的,則無需設置animation-fill-mode。
- 如果同時應用了animation-fill-mode和animation-play-state屬性,則animation-fill-mode屬性優先級更高。
animation: example 1s forwards;
在上述示例中,元素的動畫名稱為example,動畫時間為1秒,最后一幀的狀態將被保留。
在實際應用中,可以靈活使用animation-fill-mode屬性來控制動畫效果,達到更好的視覺效果。
上一篇css讓列表橫起來
下一篇mysql多列最小值