CSS при нажатий на кнопку проиграть анимацию

Question

CSS

.form-item__btn:active::before {
  display: block;
  animation: pressed 1.5s;
}
@keyframes pressed {
  20% {
    width: 50px;
    height: 50px;
  }
  80% {
    width: 200%;
    height: 300%;
  }
}

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

Answer 1

нужно воспользоваться свойством animation-fill-mode: forwards; так же у Вас нет состояния когда 100% анимации и когда 0%. а они должны быть чтобы конец анимации сохранился! пример:

document.querySelector('button').addEventListener('click', function() {  document.querySelector('.container').classList.add('active');
})

.container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

.container.active .item {
  animation: pressed 4s;
  animation-fill-mode: forwards;
}

.item {
  width: 50px;
  height: 50px;
  background: red;
}

@keyframes pressed {
  0% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 100px;
    height: 200px;
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<button>start!</button>

БЛОГ НА HUSL

CSS при нажатий на кнопку проиграть анимацию

Ответы (1 шт):