Javascript CSS动画重置变换

我有一个CSS时钟，分针有以下动画样式：

animation: a36016 3600s normal infinite steps(3600,end);

这使得它可以随着时间的推移而移动

加载页面时，minutes hand的旋转设置如下：

transform:rotate(180deg);

$('#clock .mm').css( {'transform': 'rotate(210deg)'});

使用setInterval，我正在尝试重新同步它。例如，10分钟后，如果我得到旋转，例如210度，然后我改变它如下：

transform:rotate(180deg);

$('#clock .mm').css( {'transform': 'rotate(210deg)'});

问题是，它实际上并没有将度数设置为210，出于某种原因，它会添加到动画已经移动的度数。所以它变成210度加上它已经移动的任何量

有人能告诉我如何调整动画样式以避免出现这种情况吗？如果使用javascript将旋转更改为任意值，则无论它已经移动了多少度，都应将其设置为该值

谢谢

*以下是完整的代码*

PHP

<?php

date_default_timezone_set("Europe/London");

$hour = date("g");
$minutes = date("i");
$seconds = date("s");

   if ($hour>=12){
    $hour=0;
}

$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;

$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;    

?>

正文{
溢出：隐藏；
宽度：100wh；
高度：90vh；
颜色：#fff；
背景：线性梯度（-45度，#E73C7E，#23A6D5，#23D5AB）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
}
@-webkit关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@-moz关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
h1，
h6{
字体系列：“开放式SAN”；
字体大小：300；
文本对齐：居中；
位置：绝对位置；
最高：45%；
右：0；
左：0；
}
/***数字字体***/
@字体{
字体系列：“挂钟”；
src:url（'font/wallclock.eot'）；
}
@字体{
字体系列：“挂钟”；
src:url（'font/wallclock.woff'）格式（'woff'），url（'font/wallclock.ttf'）格式（'truetype'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“WallClockPS”；
src:url（'font/wallclock.otf'）格式（'opentype'）；
字体大小：正常；
字体风格：普通；
}
/***时钟规则。纯CSS***/
#钟{
过渡：所有0.5s缓解；
}
#a{
宽度：100em；
高度：100em；
位置：相对位置；
边界半径：50em；
背景：#eee；
盒影：插图0.5em-0.5em 0#ccc，插图1.7em-1.7em 0#555，插图-0.3em-0.4em 0#999，插图-0.3em 0.2em 0#ccc，插图-1em-1em 0#555，1em 3em 2em rgba（0,0,0,0.3）；
}
#b{
宽度：94em；
高度：94em；
顶部：3em；
左：3em；
位置：相对位置；
边界半径：47em；
背景：#fff；
盒影：插图0.4em 0 0#fff，插图0-0.6em 0#ddd，插图1.6em-0.8em 0#222，插图-1.6em 0.8em 0#222，插图2em 2em 0#222，0.6em-0.3em 0#999，-1em 1em 0#777，-1.3em-2em 0#f，1.3em 0#999；
}
#c{
宽度：89em；
高度：89公分；
顶部：2.5em；
左：2.5em；
位置：相对位置；
边界半径：44.5em；
背景#f4f6；
盒影：插入0.5em 1em 0.5em rgba（0,0,0,0.4），插入1em 2em 2em rgba（0,0,0,0.3），插入0.5em 3em rgba（0,0,0,0.1），-1.6em 0.8em 0#444，1.6em-0.8em 0#444；
}
#d{
宽度：88em；
高度：88公分；
顶部：0.5em；
左：0.5em；
位置：相对位置；
边界半径：44em；
}
#e{
宽度：81.8em；
身高：81.8em；
垫面：40.9em；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
左：2.9em；
顶部：2.9em；
位置：绝对位置；
边框：实心0.4em#777；
边界半径：40.9em；
}
#二,{
左：43.4em；
位置：绝对位置；
}
B
我{
高度：82em；
位置：绝对位置；
边框：实心0#222；
边界宽度：3em0；
显示：块；
}
b{
宽度：1.2米；
}
我{
宽度：0.2米；
}
b> 我,，
i> 我{
变换：旋转（6度）；
边缘顶部：-3em；
}
b> b{
变换：旋转（30度）；
边缘顶部：-3em；
}
b> 我{
左：0.3em；
}
#f，
#g{
字体：12em/1.0em挂钟，无衬线；
文本对齐：居中；
宽度：6.8em；
颜色：#222；
}
#g> u>u{
字母间距：0.1米；
}
#g> u>u>u{
字母间距：0；
}
u{
显示：块；
线高：1米；
文字装饰：无；
}
u> u>u>u{
保证金：0.5em-0.55em；
填充：0.05em；
}
u> u>u{
保证金：0.0em-1.75em；
填充：0.7em；
}
u> u{
保证金：-0.55em 0；
文本对齐：右对齐；
填充：0.1.65em；
}
#f{
顶部保证金：-3.37埃姆；
}
#g{
边缘顶部：-6em；
}
#Gu>u{
文本对齐：左对齐；
}
#q{
字体：2.2em/1em Segoe UI，Helvetica，无衬线；
文本对齐：居中；
边缘顶部：-11.5em；
颜色：#555；
}
.ss，
嗯，
.hh{
宽度：80em；
高度：80em；
顶部：4em；
左：4em；
位置：绝对位置；
}
.hh{
变换：旋转（-55度）；
}
嗯{
变换：旋转（60度）；
}
.ss{
动画：勾选1s正常无限步（25，结束）；
}
@关键帧滴答作响{
0% {
变换：旋转（0度）；
}
12% {
变换：旋转（6度）；
}
100% {
变换：旋转（6度）；
}
}
s{
宽度：1米；
高度：48em；
顶部：6em；
左：39.5em；
位置：相对位置；
背景：#a00；
外形：1px实心透明；
动画：a360_10 60s标准无限步（60，结束）；
}
老先生{
宽度：3em；
高度：3em；
背景：#a00；
保证金：-9.5em 0.38.4em；
边界半径：1.5em；
}
@关键帧a360_10{
0% {
变换：平移（0，10em）旋转（0度）平移（0，-10em）
}
100% {
变换：平移（0，10em）旋转（360度）平移（0，-10em）
}
}
m{
高度：48em；
左：38.9em；
宽度：2.2米；
位置：相对位置；
背景：#222；
边界：0 0 32em 0；
动画：a36016 3600标准无限步（3600，结束）；
外形：1px实心透明；
}
@关键帧a36016{
0% {
变换：平移（0，16em）旋转（0度）平移（0，-16em）；
}
100% {
变换：平移（0，16em）旋转（360度）平移（0，-16em）；
}
}
先生{
宽度：5em；
身高：5公分；
背景：#222；
保证金：-10.5em 0.37.4em；
边界半径：2.5em；
}
h{
宽度：3em；
高度：34em；
左：38.5em；
位置：相对位置；
背景：#222；
边缘顶端：13em；
外形：1px固体tra