Как сохранить состояние объектов после завершения анимации?

Есть несколько способов сохранить состояние объектов после завершения анимации:

1. Использовать CSS свойство `animation-fill-mode` со значением `forwards`. Это позволит сохранить последнее состояние анимации после завершения.
Пример:
```css
.square {
    animation: myAnimation 2s forwards;
}
```

2. Использовать JavaScript, чтобы добавить класс с необходимыми стилями после завершения анимации. Например, после завершения анимации можно добавить класс `.static` с помощью обработчика события `animationend`.
Пример:
```javascript
const square = document.querySelector('.square');
square.addEventListener('animationend', () => {
    square.classList.add('static');
});
```
```css
.static {
    animation: none;
}
```

3. Использовать CSS ключевые кадры, задавая последний кадр анимации как состояние после завершения.
Пример:
```css
@keyframes myAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateY(100px);
    }
    100.1% {
        transform: translateY(100px); /* Состояние после завершения */
    }
}
```

Выберите подход, который лучше всего подходит для вашего случая.

animation-fill-mode: forwards;