Сохранение позиции анимации @keyframes

Question

В чём суть, делаю что-то типо плеера, при нажатии на кнопку play(начать проигрывание), начинает крутиться виниловая пластинка, к ней добавляется класс с анимацией, после повторного нажатия класс, отвечающий за прокрутку убирается и позиция анимация должна остаться той же, что была при остановки, а потом с этой же позиции стартовать, пример похожей прокрутки реализован в одном из проектов на codepen - ***

https://codepen.io/himalayasingh/pen/QZKqOX.

> <div class="music-box-1">
>     <div class="borderVynyl"><img src="img/vinyl.png" alt="record" class="vinyl" 
>     id="vinyl">
>     </div> </div> //Добавляю это при клике .vinylRotate {   animation-fill-mode: both;   animation-name: rotation;  
> animation-duration: 5s;   animation-iteration-count: infinite;  
> animation-timing-function: linear;   transform: scale(1.4); }
> @keyframes rotation {   0% {
>     transform: rotate(0deg);   }   100% {
>     transform: rotate(360deg);   } } //Стили для самой пластинки  .vinyl {   width: 90px;   height: 90px;   background: #c22091;  
> position: relative;   border-radius: 100%;   border: 4px solid white; 
> transition: 0.3s;   animation-fill-mode: forward; }

***

Answer 1

const smile = document.querySelector('.smile');
document.querySelector('button').addEventListener('click', () => {
  smile.style.animationPlayState = smile.style.animationPlayState !== 'paused' ? 'paused' : 'running';
});

.smile {
  animation: 4s linear 0s normal none infinite running rotation;
  width: 100px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<button>:)</button>
<img class="smile" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

БЛОГ НА HUSL

Сохранение позиции анимации @keyframes

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