Startowanie keyframe przez JS - inny sposob

pytanie zadane 26 stycznia 2019 w JavaScript przez MrxCI Dyskutant (8,260 p.)

Posiadam owy skrypt CSS, klase z prostą animacją

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: red;
  }
  100% {
    background-color:blue;
  }
}

I chce wystartować na divie o id "test" owa animację, jedyny sposob jaki znam to nadanie temu divowi klasy .element aby wystartować animację, ale nie satysfakcjonuje mnie to, istnieje sposob aby elementowi ktory ma przypisaną klasę ".element" odpalić owę keyframes lub kontrolować z poziomu JS w bardziej profesjonalny sposob?

2	komentarz 26 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.) Czemu cie to nie satysfakcjonuje? Może coś robisz źle? Jaki efekt chcesz osiągnąć?

komentarz 26 stycznia 2019 przez MrxCI Dyskutant (8,260 p.)

Podobno tworzenie klas po to aby zarządzać css z poziomu .js jest podobno złym rozwiązaniem, jak np. zrobienie klasy z pozycjami po lewej stronie dla diva i prawej, aby pozniej je zmieniac do przesuwania, w tym przypadku lepszym jest przez style.left = `x px`; ustawiac i w podobny sposob chcialbym kontrolować keyframes, bez tworzenia dodatkowych klas tylko dla animacji jak np. .run-animation-pulse itd.

komentarz 26 stycznia 2019 przez xmentor Nałogowiec (49,520 p.)

Podobno tworzenie klas po to aby zarządzać css z poziomu .js jest podobno złym rozwiązaniem

Według mnie bzdura :) Łatwiej i przejrzyście jest operować na klasach, dodawać, usuwać - zmieniać stan danego elementu.

komentarz 26 stycznia 2019 przez MrxCI Dyskutant (8,260 p.)

Moje kursy nakierowaly mnie na taki tok mylenia, prosilbym kogos o odpowiedz aby wybrac najlepsza :3

komentarz 27 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.)

Dodawanie klasy jest nawet lepszym pomysłem ponieważ animacja CSS może być płynniejsza i lepiej zoptymalizowana. Animacje oparte o CSS mogą prerenderować kolejne klatki animacji dzięki czemu twoje animacje będą bardziej płynne ;)