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

Question

[Ника Ни]

Суть проблемы заключается в том, что анимация прокручивается бесконечно из-за infinity, но если я его убираю, то по завершению анимации, объекты (анимированные квадратики) исчезают. Я же пытаюсь сделать так, чтобы квадратики после увеличения оставались на своих позициях, но уже без анимации. Перепробовала очень много всего, самой тяжело разобраться, так как я только учусь. Буду благодарна за подробное объяснение :з

spoiler

.wrapper .box-wrap {
  width: 80%;
  height: 80%;
  margin: calc((100% - 100%) / 2) calc((100% - 100%) / 2);
  position: relative;
  transform: rotate(46deg);
}
.wrapper .box-wrap .box.one {
  animation: moveGradient 15s infinite, oneMove 4.5s infinite;
}
.wrapper .box-wrap .box.two {
  animation: moveGradient 15s infinite, twoMove 4.5s 0.15s infinite;
}
.wrapper .box-wrap .box.three {
  animation: moveGradient 15s infinite, threeMove 4.5s 0.3s infinite;
}

@keyframes moveGradient {
  to {
    background-position: 100% 50%;
  }
}
   
  
.enlarged {
    transform: scale(1.2);
    transition: transform 0.8s ease-in-out; /* Плавное изменение размера */
   }
   
   .paused {
    animation-play-state: paused;
   }
   
</spoiler>

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
       const boxes = document.querySelectorAll('.one, .two, .three');
       boxes.forEach(box => {
         box.classList.add('paused', 'enlarged');
       });
    }, 2000); 
   });

Comments

[Дмитрий Кузнецов]

Оформите код по правилам - в специальный тег, а так же, если код длинный, то можно спрятать в спойлер.

[Ivan Ustûžanin]

кода много, лень разбираться, но возможно поможет animation-fill-mode

[Ника Ни]

IvanU7n, и на этом спасибо

Answer 1

[shsv382]

animation-fill-mode: forwards;