在CSS動畫中,我們常常需要讓元素執行完動畫后消失。這可以使用CSS的transition和animation屬性來實現。
使用transition屬性時,我們可以設置元素的透明度(opacity)為0,并設置transition-duration屬性為動畫的時間。當執行完動畫后,元素的透明度會變成0,即消失了。
.fade-out { opacity: 0; transition-property: opacity; transition-duration: 1s; }
使用animation屬性時,我們可以使用animation-fill-mode屬性來設置動畫執行完后的狀態。默認值為none,這意味著動畫執行完后元素會回到原來的狀態。如果設置為forwards,則動畫執行完后元素會保持動畫的最后一幀,即消失了。
.fade-out { animation-name: fadeOut; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
通過以上兩種方法,我們可以讓元素執行完動畫后消失,達到更好的動畫效果。