Hogyan tudnék egy CSS-el animált (össze-vissza forgó) dobó kockát random 6 fix pozícióban gombnyomásra megállítani?

Visszavonom az előző kommentemet, van rendes és egyszerű módja pause-olni a CSS animationt, itt a leírás és működő példa is van rá:

[link]

(az első 3 válaszoló is én voltam)

Akkor legyen úgy, hogy beállítasz egy intervalt ami mondjuk fél másodpercenként fut le, és ez beállít a kockán a hatból egy random pozíciót. CSS-ből előírod, hogy a forgatás lineáris translate-tel legyen, fél másodperces lefutással. Az intervalt addig ismétled, amíg gombnyomás nem történik, akkor leállítod. Így folyamatos, sima lesz a forgás a gombnyomásig, akkor befordul egy random poziba a 6 közül és úgy marad.

Így egyáltalán nem is lesz szükség CSS animationre.

Vagy még jobb, ha számon tartod a három dimenzió szerinti elforgatásokat változóban, és mindig csak az egyiket inkrementálod. Így folyamatosabb lesz a mozgás, minden ciklusban csak 90 fokot fordul vmelyik tengelyen.

Ez esetben ne adj neki classokat, hanem direktben forgasd JS-sel.