CSSアニメーションが最後の位置に留まる方法

animation-fill-modeプロパティを使用する方法: CSSのanimation-fill-modeプロパティを使用すると、アニメーションが終了した後も最後のステップで停止することができます。以下は例です。
```
.animation-element {
 animation-name: slide-in;
 animation-duration: 2s;
 animation-fill-mode: forwards;
}
```
上記の例では、.animation-elementクラスにslide-inというアニメーションが適用され、2秒間かけて実行されます。animation-fill-modeプロパティにforwardsを指定することで、アニメーションが最後の位置で停止します。
animation-play-stateプロパティを使用する方法: animation-play-stateプロパティを使用すると、アニメーションの再生と一時停止を制御できます。以下は例です。
```
.animation-element {
 animation-name: slide-in;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-play-state: paused;
}
.animation-element.active {
 animation-play-state: running;
}
```
上記の例では、.animation-elementクラスにslide-inというアニメーションが適用されますが、最初は一時停止状態です。.animation-element.activeクラスが追加されると、アニメーションが再生されます。
JavaScriptを使用する方法: JavaScriptを使用してアニメーションを制御することもできます。以下に例を示します。
```
<div class="animation-element"></div>
<script>
 const element = document.querySelector('.animation-element');
 element.addEventListener('animationend', () => {
   element.style.animationPlayState = 'paused';
 });
</script>
```
上記の例では、animationendイベントを監視し、アニメーションが終了したらアニメーションの再生状態を一時停止に変更しています。

これらの方法を使用すると、CSSアニメーションを最後の位置に留まらせることができます。適用する方法は、使用する環境や要件によって異なる場合があります。