CSS3的animate end是一個非常重要的特性。它可以在動畫結束時執(zhí)行一些操作,比如改變元素的樣式,或者執(zhí)行一個回調函數(shù)。
.elem { animation: myAnimation 2s; } .elem.animated { animation-name: none; } .elem.animated::after { content: "Animation Ended!"; background: yellow; padding: 5px; } .elem:hover { animation-play-state: paused; }
如上所示,在元素上設置一個動畫,然后在動畫結束時設置一個類名,以取消動畫效果。然后,使用偽類 ::after 在元素后面添加一些內容,以執(zhí)行動畫結束后的一些操作。
此外,我們還可以在動畫結束時執(zhí)行一些回調函數(shù):
const elem = document.querySelector('.elem'); elem.addEventListener('animationend', () =>{ console.log('Animation Ended!'); });
這個回調函數(shù)將在動畫結束時調用,并輸出一條信息到控制臺中。
總之,CSS3的animate end是一個非常有用的特性,它可以幫助我們在動畫結束時執(zhí)行一些操作,無論是改變元素的樣式,還是執(zhí)行回調函數(shù),都可以幫助我們更好地控制動畫的效果。