Jak uzyska efekt transition z CSS w js przejście miedzy stylami?

Question

Chciałbym uzyskać efekt transition z CSS ale tak by można było go wywołać w js w odpowiedniej funkcji. Chodzi głównie o płynne przejście miedzy kolorami.

Mam np 3 różne style w css styl1 styl2 i styl3

W jaki sposób można w js się przełączyć czyli dany div ma najpierw styl1 potem (ta funkcja której nie wiem jak napisać) i jest styl2 przejście miedzy nimi zajmuje np 10s a w tym czasie jest płynne przejście  miedzy nimi tak jak po najechaniu na diva robi transition z CSS

Answer 1

Możesz stworzyć animację trwającą 10s w CSS3.

@keyframes przyklad {
/* przejście koloru tła z czerwonego na żółty*/
    from {background-color: red;}
    to {background-color: yellow;} 
}

/* element któremu chcesz dać animację */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: przyklad;
    animation-duration: 10s;
}

 

Answer 2

Zrób normalnie transition w CSS dla jakiejś klasy i po prostu w JS podmieniaj klasy elementu. I już ;)