dateコンストラクタとtransformを使って要素を滑らかに1回転

Question

前提・実現したいこと

↓でやってる感じでdateのsecondとmilisecondを用いて10秒間の間に一回回るようなものを作りたいです。最初はsecond*36のみですませていたのですが、動きがもっさりしていたことからmilisecondを追加してなめらかにうごかそうとしたところ、押すタイミングによって変わるmilisecondの値が相まってかmilisecondが0の値に戻るときに急に動くように。。。
って感じで滑らかにできないです、、、

発生している問題・エラーメッセージ

button.addEventListener("click",gameStartInterval,false);
            
            function gameStartInterval(){
                setInterval(gamePlaying,100);
                console.log("プログラムスタート！");
                alert("プログラムスタート！");    
            }
 
function(){
  date =new Date;
             milisecond = date.getMilliseconds();
            console.log(second);
            centerpic.style.transform = "rotate("  + second*36 + + + milisecond*0.0036 + "deg)";
            console.log( + second*6 + + + milisecond*0.0006 + "deg");
}
            

追記
できればkeyframeを使わずにきっちり１０秒でアニメーションを終わらせたいです。。。

Comments

[yambejp]

最低限動くソースと、想定する挙動を図示してください

Answer 1

#centerpic.on {
  transition: transform 10s linear;
  transform: rotate(1turn);
}

https://developer.mozilla.org/ja/docs/Web/CSS/transition