keyframes + псевдоклассы (css/html)

Рейтинг: 0Ответов: 1Опубликовано: 07.02.2023

как сделать что бы при нажатии включался keyframes

например - при клике на изображение само изображение начинает крутится ( с помощью rotate )

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Тут два варианта как вы имели в виду, либо так:

#click-to-anim {
  width: 100px;
  height: 100px;
  outline: 5px solid red;
  display: block;
}

#click-to-anim:active {
  animation: 1s 0s 1 linear both running;
  animation-name: someAnim; /* Здесь пишите название анимации, которые вы указываете после @keyframes */
}

@keyframes someAnim {
  0% {
    background: red;
  }

  100% {
    background: blue;
    outline-color: blue;
  }
}
<div id="click-to-anim"></div>

Либо так:

let clickToAnim = document.querySelector('#click-to-anim')

clickToAnim.style.animationPlayState = 'paused'

clickToAnim.addEventListener('click', () => {
  clickToAnim.style.animationPlayState = 'running'
})

clickToAnim.addEventListener('animationiteration', () => {
  clickToAnim.style.animationPlayState = 'paused'
})
#click-to-anim {
  width: 100px;
  height: 100px;
  outline: 5px solid;
  display: block;
  animation: 1s 0s infinite linear both;
  animation-name: someAnim; /* Здесь пишите название анимации, которые вы указываете после @keyframes */
}

@keyframes someAnim {
  0% {
    background: blue;
    outline-color: blue;
  }

  50% {
    outline-color: red;
    background: red;
  }

  100% {
    background: blue;
    outline-color: blue;
  }
}
<div id="click-to-anim"></div>