Tengo una brújula, y esta animación hace que la aguja de la brújula gire de un lado a otro un poco como una real. Por ejemplo, si apuntara a 30 grados, aplicaría esto. +10 y -10.

 @keyframes spin { 0% { transform: rotate( 40deg ); } 50% { transform: rotate( 20deg ); } 100% { transform: rotate( 40deg ); } }

Con estas propiedades

 animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: ease-in-out;

El problema es que solo sé el grado después de calcularlo en javascript, por lo que será necesario aplicar un estilo o clase con js.

Mi primera idea es redondear el grado al 10 más cercano para poder aplicarle una de estas animaciones. En el peor de los casos, habrá 5 grados fuera. Podría hacerlo con 1 grado de precisión si no fuera mucho estrés para el cliente.

 $divisions: 36; @for $i from 0 through $divisions { $value: ( 360 / $divisions ) * $i; @keyframes spin#{ $value } { 0% { transform: rotate( #{ $value + 10 }deg ); } 50% { transform: rotate( #{ $value - 10 }deg ); } 100% { transform: rotate( #{ $value + 10 }deg ); } } }

Declara 36 animaciones de fotogramas clave diferentes. Intento aplicar un estilo en línea de nombre de animación: spin40; (Redondeado al 10 más cercano), pero eso no funciona. Supongo que el nombre de la animación no funciona como un estilo en línea.

Podría declarar una clase en el mismo bucle y aplicar esa clase en línea, pero también estoy leyendo esto, es una muy mala idea. Y probablemente sea una mala práctica declarar 36 animaciones.

Pensé que tal vez podría hacerlo en una mezcla, pero realmente no puedo, porque aún se compilaría en 36 animaciones diferentes.

¿Cuál es la mejor manera en que puedo hacer esto, por favor, muchas gracias?