CSS3停止循環(huán)動畫

CSS3動畫能夠通過屬性animation-iteration-count設(shè)置循環(huán)次數(shù)。然而，在某些情況下，您可能需要停止動畫在最后一幀，而不是循環(huán)。在這種情況下，可以使用以下解決方案。

/* 定義動畫 */
@keyframes my-animation {
0% { transform: translateX(0);}
100% { transform: translateX(200px);}
}
/* 把動畫應(yīng)用到元素 */
.my-element {
animation-name: my-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/* 創(chuàng)建一個類來停止動畫 */
.stop-animation {
animation-play-state: paused;
/* 防止動畫突然停止，將元素停止的位置作為其最終狀態(tài) */
transform: translateX(200px);
}

如上所示，在CSS中定義動畫名稱和動畫屬性，然后將其應(yīng)用到元素中。接著，創(chuàng)建一個類來停止動畫，并使用animation-play-state: paused屬性將其應(yīng)用到元素中。最后，為了確保元素被停止在動畫結(jié)束時的位置，需要為.stop-animation類添加一個transform屬性。

當(dāng)需要停止動畫時，只需要使用JavaScript為元素添加.stop-animation類即可，例如：

var targetElement = document.getElementById("my-element");
targetElement.classList.add("stop-animation");

這將為id為“my-element”的元素添加.stop-animation類，并使動畫在最后一幀停止。