Как заставить анимацию keyframes проигрываться по проишествии события

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

подскажите пожалуйста, можно ли как-нибудь keyframes анимацию заставить проигрываться только по происшествии какого-либо события?

например код js

window.addEventListener('scroll', () => {
    if(window.scrollY = 500){
        play css keyframes animation
    }
});

иными словами хочу понять, может ли анимация css взаимодействовать с условиями js, или возможно можно задать условие в самом css, помогите разобраться пожалуйста.

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

Ответы

▲ 2Принят

Свойство animation прописываете какому-нибудь классу, который по событию будет добавляться нужному элементу

document.querySelector('.my-div').addEventListener('click', e => e.target.classList.toggle('animated'));
.my-div {
  width: 100px;
  height: 100px;
  background: #060;
  color: #fff;
}

.my-div.animated {
  animation: 1s linear infinite alternate fadeInOut;
}

@keyframes fadeInOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
<div class="my-div">Click me</div>