CSS執行動畫后讓它消失是網頁設計中常用的一種效果。我們可以使用CSS transition或者animation屬性實現。
/* transition方式 */ div{ width: 100px; height: 100px; background-color: red; transition: all 1s ease; } div:hover{ width: 0; height: 0; opacity: 0; } /* animation方式 */ div{ width: 100px; height: 100px; background-color: red; animation: fadeOut 1s forwards; } @keyframes fadeOut{ to{ width: 0; height: 0; opacity: 0; } }
使用transition方式時,我們為元素設置過渡屬性(transition),然后在元素的:hover偽類中為元素設置最終狀態。鼠標懸停在元素上時,元素會從初始狀態過渡到最終狀態。使用animation方式時,我們首先為元素設置初始狀態,然后使用@keyframes定義元素的最終狀態。最后再為元素設置動畫屬性(animation)。
在以上兩種方式中,我們都可以通過調整過渡時間或者動畫時間實現不同的效果。另外,我們也可以通過調整最終狀態的屬性值來改變動畫的效果和形態。
綜上所述,CSS執行動畫后讓它消失是一種實現網頁設計效果的方式。我們可以使用transition或者animation屬性來實現,同時可以通過調整時間和屬性值來改變動畫效果和形態。