JavaScriptでCSS animationを制御したい2

CSSアニメーションで1分時計を作っています
JavaScriptで秒針の制御をしたいのですが、
秒針を指定した位置に合わせるやり方は、教えていただきましたが、戻す処理がわかりません

戻す処理とは、
現在40秒なら50秒の位置
現在50秒なら60秒の位置
現在55秒なら60秒の位置
に秒針を移動させることです

現在の秒針が取得し、設定させるような事ができれば実現可能かと思うのですが、、、
わからずにいます
詳しい方教えていただけませんでしょうか？

<style>
.clock{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto;
  border: 5px solid #333;
}

/* borderで針の形をつくる */
.sec-hand{
  position: absolute;
  left: 50%;
  top: 50%;
  width:0;
  height:0;
  border-top: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 120px solid #f00;
  transform-origin: left top;
  transform: rotate(0deg) translate(-50%, -100%);
  animation: tick 60s infinite linear;//これを外すと秒針の指定が動く
  animation-play-state : running;
}

/* 秒針のアニメーション */
@keyframes tick{
  from{
    transform: rotate(360deg) translate(-50%, -100%);
  }
  to{
    transform: rotate(0deg) translate(-50%, -100%);
  }
}

.center-circle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #000;
}


.clock span{
  position: absolute;
  font-size: 2em;
  width: 45px;
  line-height: 1em;
  text-align:center;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}

/* 数字1~12までを30度ずつ回転して配置 */


.clock span:nth-of-type(1){
  transform: rotate(90deg) translate(0, -120px) rotate(-90deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(2){
  transform: rotate(180deg) translate(0, -120px) rotate(-180deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(3){
  transform: rotate(270deg) translate(0, -120px) rotate(-270deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(4){
  transform: translate(0, -120px) translate(-50%,-50%); 
}

</style>


<input type="button" value="停止" onclick="aaa.style.animationPlayState='paused'">
<input type="button" value="10秒に針を合わせる"
       onclick="aaa.style.animation='none';
                void aaa.offsetWidth;
                aaa.style.animation='tick 60s infinite -50s linear'">


<div class="clock">
  <!-- 数字 -->

  <span>15</span>

  <span>30</span>

  <span>45</span>

  <span>60</span>

  <!-- 秒針 -->
  <div id="aaa" class="sec-hand"></div>

  <!-- 中央の丸いやつ -->
  <div class="center-circle"></div>
</div>

行動規範の内容に同意します

回答2件

休みで時間があったのでサンプル作成してみました。
JavaScriptで、開始時間と経過時間を記録しておいて、それをもとに animation を制御するようにしました。

html
1<input type="button" value="停止" onclick="pause()">
2<input type="button" value="開始" onclick="start()">
3<input type="button" value="針を10秒戻す" onclick="AddTimer()">
4<div class="clock">
5  <!-- 数字 -->
6
7  <span>15</span>
8
9  <span>30</span>
10
11  <span>45</span>
12
13  <span>60</span>
14
15  <!-- 秒針 -->
16  <div id="aaa" class="sec-hand move"></div>
17
18  <!-- 中央の丸いやつ -->
19  <div class="center-circle"></div>
20</div>

js
1let startTime = Date.now();
2let duration = 0; 
3
4function pause() {
5  aaa.style.animationPlayState='paused';
6  duration = Date.now() + startTime; 
7}
8function start() {
9  aaa.style.animationPlayState='running';
10  startTime = Date.now() - duration;
11}
12
13function AddTimer() {
14  startTime = startTime + 10000;
15  duration = Date.now() - startTime;
16  if (duration < 0) {duration=0; startTime = Date.now()};
17  let state = aaa.style.animationPlayState;
18  aaa.style.animation='none';
19  void aaa.offsetWidth;
20  aaa.style.animation='tick 60s infinite ' + duration * -1 + 'ms linear'  
21  aaa.style.animationPlayState = state;
22}