Как зафиксировать анимацию кнопки в CSS?

Для зафиксирования анимации кнопки в CSS можно использовать несколько подходов. Ниже приведены два наиболее распространенных.

1. Использование ключевых кадров:
В CSS есть специальное правило @keyframes, которое позволяет создавать анимацию, задавая ключевые кадры и указывая, какие стили должны применяться в каждом кадре. Для создания анимации кнопки можно использовать следующий код:

   @keyframes buttonAnimation {
     0% { transform: scale(1); }
     50% { transform: scale(1.2); }
     100% { transform: scale(1); }
   }

   .button {
     animation-name: buttonAnimation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     /* другие свойства анимации */
   }

В этом коде мы создаем анимацию с именем buttonAnimation и задаем ключевые кадры с помощью процентных значений. В данном случае кнопка будет изменять свой размер от первого кадра (scale 1) до середины анимации (scale 1.2) и затем вернется к своему исходному размеру. Затем мы применяем эту анимацию к кнопке с помощью свойства animation-name. Свойство animation-duration задает время, в течение которого будет происходить анимация. Свойство animation-iteration-count задает количество повторений анимации, в данном случае мы указываем значение infinite для бесконечного повторения.

2. Использование CSS-классов:
Другой способ зафиксировать анимацию кнопки состоит в использовании CSS-классов и переключении между ними с помощью JavaScript. Для этого нужно создать два CSS-класса: один для обычного состояния кнопки, а другой для состояния анимации. Затем с помощью JavaScript можно добавить и удалить класс с анимацией, чтобы запустить или остановить анимацию кнопки.

   .button {
     /* общие стили кнопки */
   }

   .button.animation {
     animation-name: buttonAnimation;
     animation-duration: 3s;
     /* другие свойства анимации */
   }

В данном случае мы создали класс .animation, который содержит стили для анимации кнопки, используя аналогичный код ключевых кадров, как в предыдущем примере. Затем, с помощью JavaScript, мы можем добавить класс .animation к кнопке, чтобы запустить анимацию

   var button = document.querySelector('.button');

   function startAnimation() {
     button.classList.add('animation');
   }

   function stopAnimation() {
     button.classList.remove('animation');
   }

   button.addEventListener('click', startAnimation);

В этом коде мы получаем кнопку с помощью метода querySelector и добавляем обработчик события клика, при клике на кнопку запускается анимация, добавляется CSS-класс .animation к элементу кнопки. Если нужно остановить анимацию, можно вызвать функцию stopAnimation, которая удаляет класс .animation. Это позволяет зафиксировать анимацию кнопки.

В зависимости от ваших потребностей и требований проекта можно выбрать один из этих подходов или, возможно, использовать какую-то комбинацию обоих.