JavaScriptでCSS animationを制御したい

Question

やりたいこと

JavaScriptでCSS animationを制御したい
下記の1分時計プログラムに停止後に秒針の指定をできるようにしたいのですが、

animation: tick 60s infinite linear;//これを外すと秒針の指定が動く

これを付けると、秒針指定が動かなくなっていまいます
これを外すと秒針指定は動くのですが
何が問題なのでしょうか？

<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.transform='rotate(60deg) translate(-50%, -100%)'">


<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>

Answer 1

CSSアニメーションのリセット（再スタート）に関しては、
検索してみると、
JavaScript - アニメーションcssをjsの再起毎に実行したい｜teratail
とか、
css animationのリスタートを行う場合のハック - Qiita
が参考になりそうです。

10秒に針を合わせる方法は、
animation='tick 60s infinite -50s linear
というようにanimation-delayで開始タイミングを50秒早めればいいでしょう。

ということで下記のコードで10秒に針を合わせることができました。

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

Comments

[退会済みユーザー]

いつも回答ありがとうございます＞＜
動かせました！

上記のコードを改良してMAXを60として10秒後に合わせたい場合は、
<input type="button" value="10秒に針を合わせる"
onclick="aaa.style.animation='none';
void aaa.offsetWidth;
aaa.style.animation='tick 60s infinite +10s linear'">
としたのですが、動きませんでした
この場合はどのように書けばいいでしょうか？

[hatena19]

.animation='tick 60s infinite +10s linear' だとアニメーションが10秒後に開始されるという意味になります。
50秒の位置にしたいということなら、
.animation='tick 60s infinite -10s linear'
とします。アニメーションが10秒前に開始されたとする、つまり、60から10進んだ50秒の位置から始まる、ということです。

[退会済みユーザー]

回答ありがとうございます！

マイナスではなく、プラスにしたいと考えています
50秒だった場合、60秒にしたい
55秒でも60秒を超え無くしたい
ということです、わかりづらくてすみません。。。

[hatena19]

現在の秒針の位置から10秒戻したいということでしょうか。
ただし、60秒を超えることはない。
例えば、
現在40秒なら50秒の位置
現在50秒なら60秒の位置
現在55秒なら60秒の位置
ということですか。

[退会済みユーザー]

はい！！

[hatena19]

そうなると、CSSアニメーションでは現在どの位置かを取得するかは難しいので、JSでアニメーションさせることになかと思います。質問内容がもとのものからは変わってきますので、新規に質問をたてなおした方がいいでしょう。