I have a compass, and this animation makes the compass needle rotate back and forth a little bit like a real one. For example if it was pointing at 30 degrees, I would apply this. +10 and -10.

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

With these properties

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

The problem is, I only know the degree after its calculated in javascript, so a style or class will need to be applied with js.

My first idea is rounding the degree to the nearest 10 so i can apply one of these animations to it. worst case scenario it will be 5 degrees out. I could do it with 1 degree of accuracy if its not that much stress on the client

$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 ); }
  }
}

It declares 36 different keyframe animations. I try to apply an inline style of animation-name: spin40; ( Rounded to the nearest 10 ), but that isn't working. I assume animation name doesnt work as an inline style.

I could declare a class in the same loop and apply that class inline but im also reading this is a really bad idea. And its probably bad practise to declare 36 animations.

I thought I could maybe do it in a mixin, but I cant really, because it would still compile to 36 different animations.

What is the best way I can do this please, many thanks