CSS中,我們可以使用多種方法來讓動畫停下來,以下是一些常用的方法:
1、使用animation-play-state屬性
CSS3的animation-play-state
屬性可以用來控制動畫的播放狀態(tài),我們可以通過設(shè)置該屬性為paused
來讓動畫停下來。
div { animation-name: my-animation; animation-play-state: paused; }
2、使用JavaScript
除了CSS外,我們還可以使用JavaScript來停止動畫,我們可以使用element.style.animationPlayState = 'paused';
來讓動畫停下來。
var myElement = document.getElementById('my-element'); myElement.style.animationPlayState = 'paused';
3、使用CSS選擇器
我們還可以使用CSS選擇器來選擇需要停止動畫的元素,我們可以使用:hover
選擇器來選擇鼠標(biāo)懸停的元素,并使用animation-play-state: paused;
來讓動畫停下來。
div:hover { animation-name: my-animation; animation-play-state: paused; }
是幾種常見的讓CSS動畫停下來的方法,你可以根據(jù)自己的需求選擇適合的方法。