12
Сен
2021

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

В чём суть, делаю что-то типо плеера, при нажатии на кнопку 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; }

***

Источник: https://ru.stackoverflow.com/questions/1327729/%D0%A1%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%B8-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8-keyframes

Тебе может это понравится...

Добавить комментарий