質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3225閲覧

JavaScriptでCSS animationを制御したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/22 23:07

編集2020/10/22 23:11

やりたいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

html

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

投稿2020/10/23 00:52

編集2020/10/23 00:53
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/10/23 01:35

いつも回答ありがとうございます>< 動かせました! 上記のコードを改良して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

2020/10/23 01:41

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

退会済みユーザー

2020/10/23 01:46

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

2020/10/23 02:05

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

退会済みユーザー

2020/10/23 02:07

はい!!
hatena19

2020/10/23 02:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問