実現したいこと

クリック1回目に要素を180度右回りに回転させて、クリック2回目は180度右回りで元の状態に戻り、これを繰り返しできるようなアニメーションを実現したいです。

発生している問題・分からないこと

1回目のクリック時に180度回転はできましたが、そこからさらにクリック2回目に180度回転させる方法が分からない状態です。

該当のソースコード

html、css
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>クリック回転アニメーション</title>
7  <link rel="stylesheet" href="styles.css">
8  <style type="text/css">
9    /* 回転アニメーションの定義 */
10@keyframes rotateAnimation {
11  from {
12    transform: rotate(0deg);
13  }
14  to {
15    transform: rotate(180deg);
16  }
17}
18
19/* 回転する要素のスタイル */
20.rotate-box {
21  display: block;
22  width: 100px;
23  height: 100px;
24  border: 1px solid #000;
25  margin: 50px auto;
26  cursor: pointer;
27}
28
29/* チェックボックスがチェックされたときに回転アニメーションを適用 */
30#rotateToggle:checked + .rotate-box {
31  animation: rotateAnimation 1s ease-in-out forwards;
32}
33  </style>
34</head>
35<body>
36  <div>
37    <!-- 隠されたチェックボックス -->
38    <input type="checkbox" id="rotateToggle" hidden>
39  
40    <!-- ラベルをクリックするとチェックボックスがトリガーされる -->
41    <label for="rotateToggle" class="rotate-box">testtest</label>
42  </div>
43</body>
44</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

2回目をクリックするとアニメーションなしで元の状態に戻るので、1回目の回転した角度を記憶させる？ようなコードを作るんでしょうか？

補足

特になし

yambejp

2025/03/11 09:43

回転中にクリックした場合どうしたいのでしょうか？

juner

2025/03/14 01:25 編集

回転させるだけならこういうサンプルがありますね。（JS / CSS / SVG での常時/ホバー時/クリック時それぞれの回転アニメーションサンプル） https://codepen.io/juner/pen/ZENezxL

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

回答3件

ベストアンサー

下記でどうでしょう。

css
1    /* 回転アニメーションの定義 */
2@keyframes rotateAnimation {
3  from {
4    transform: rotate(0deg);
5  }
6  to {
7    transform: rotate(180deg);
8  }
9}
10@keyframes rotateAnimation2 {
11  from {
12    transform: rotate(180deg);
13  }
14  to {
15    transform: rotate(360deg);
16  }
17}
18
19/* チェックボックスがチェックされたときに回転アニメーションを適用 */
20#rotateToggle:checked + .rotate-box {
21  animation: rotateAnimation 1s ease-in-out forwards;
22}
23#rotateToggle + .rotate-box {
24  animation: rotateAnimation2 1s ease-in-out forwards;
25}

CodePenサンプル
CSS Animation: Rotate an element on click

投稿2025/03/11 16:29

hatena19

総合スコア34292

keel

2025/03/13 00:54

ご回答ありがとうございます。返信が遅れて申し訳ありません。いただいたコードで試しましたところ、イメージしているものが出来ました。ありがとうございます。１つだけ質問なのですが、初期状態が180度回転した状態で、最初クリックをしていないのに勝手に半周してしまいます。初期状態を０度にして、勝手に動かないようにするにはどうすればいいでしょうか？よろしくお願いいたします。

hatena19

2025/03/13 02:42

CSSだけでは無理なのでJSでの制御が必要ですね。下記のサンプルをご参考に。 https://codepen.io/hatena19/pen/LEYORyp

keel

2025/03/13 07:29

ありがとうございます。クリックしたら.clickedを加える仕組みですかね？勉強になります...。よろしければもう少しお教えいただきたい事がありまして、アコーディオンメニューにいただいたコードを加えるようなことをしていたのですが、 hatena19様から一番最初にいただいたコードまでは加えることができたのですが、JavaScriptを加えるとなぜか動かなくなってしまいます。別の質問にてこの後投稿をしようかと思いますので、もしよろしければお教えいただきますと幸いです。

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

若干仕様が不確定ですが

html
1<script>
2document.addEventListener('click',e=>{
3  const t=e.target;
4  if(t.matches('.rotate-box')){
5    t.classList.toggle('click1');
6    t.classList.toggle('click2',!t.classList.contains('click1'));
7  }
8});
9document.addEventListener("transitionend",e=> {
10  const t=e.target;
11  if(t.matches('.rotate-box.click2')){
12    t.classList.remove('click2');
13  }
14});
15</script>
16<style>
17.rotate-box {
18  display: block;
19  width: 100px;
20  height: 100px;
21  border: 1px solid #000;
22  margin: 50px auto;
23  cursor: pointer;
24}
25.click1{ transform: rotate(180deg);transition: 1s;}
26.click2{ transform: rotate(360deg);transition: 1s;}
27</style>
28<div class="rotate-box">testtest</div>

調整

アニメーション中はクリックできないような仕様を追記しました

html
1<script>
2document.addEventListener('click',e=>{
3  const t=e.target;
4  if(t.matches('.rotate-box:not(.running)')){
5    t.classList.toggle('click1');
6    t.classList.toggle('click2',!t.classList.contains('click1'));
7  }
8});
9addEventListener("transitionstart", e=>{
10  const t=e.target;
11  t.classList.add('running');
12});
13document.addEventListener("transitionend",e=> {
14  const t=e.target;
15  t.classList.remove('running');
16  t.classList.remove('click2');
17});
18</script>
19<style>
20.rotate-box {
21  display: block;
22  width: 100px;
23  height: 100px;
24  border: 1px solid #000;
25  margin: 50px auto;
26  cursor: pointer;
27}
28.click1{ transform: rotate(180deg);transition: 1s;}
29.click2{ transform: rotate(360deg);transition: 1s;}
30</style>
31<div class="rotate-box">testtest</div>

投稿2025/03/11 09:47

編集2025/03/13 02:17

yambejp

総合スコア117400

keel

2025/03/13 01:17

ご回答ありがとうございます。返信が遅れて申し訳ありません。いただいたコードで試しましたところ、イメージしているものが出来ました。ありがとうございます。１つだけ質問なのですが、２回目のクリック時(180度～360度)の元に戻る際、戻りきる前にさらにクリックすると左回りで180度の地点に戻ります。クリックしてアニメーションが終わるまでは２回目以降連打しても効かない？ような仕様にするにはどうすればいいでしょうか？よろしくお願いいたします。

yambejp

2025/03/13 02:17

調整しました。ご確認ください

keel

2025/03/13 07:42

ありがとうございます。よろしければお教えいただきたいのですが、これは.runningが付与されている間は２回目以降クリックが効かないということなのでしょうか？

yambejp

2025/03/13 08:39

>これは.runningが付与されている間は２回目以降クリックが効かないはいそうです

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

transition の方が楽ではないですか？

css
1/* 回転する要素のスタイル */
2.rotate-box {
3    display: block;
4    width: 100px;
5    height: 100px;
6    border: 1px solid #000;
7    margin: 50px auto;
8    cursor: pointer;
9    transform: rotate(0deg);
10    transition: 1s;
11}
12
13/* チェックボックスがチェックされたときに回転アニメーションを適用 */
14#rotateToggle:checked+.rotate-box {
15    transform: rotate(180deg);
16}

投稿2025/03/11 09:17

Lhankor_Mhy

総合スコア37338

Lhankor_Mhy

2025/03/11 09:18

あー、両方右回りなのですね。見落としてました。

keel

2025/03/13 01:22

ご回答ありがとうございます。返信が遅れて申し訳ありません。両方右回りの場合は、いただいたコードの14行目のような感じのものをもう1つ用意すればいいのでしょうか？よろしくお願いいたします。

Lhankor_Mhy

2025/03/13 06:42

すみません、違います。 transition を使うなら、yambejp さんのご回答のようにスクリプトに頼ることになるかと思います。 CSSだけで書くなら、hatena19 さんのご回答のように初期状態でもアニメーションすることになるかと思います。これを避けるにはスクリプトが必要かと思います。つまり、HTML＋CSSだけで初期状態を区別できれば解決するのですが、そういう上手いものがちょっと思いつかないです。:focus 疑似属性を使えば似たようなことはできそうかと思いますが、おそらくinputを表示することが条件になるかと。

keel

2025/03/13 07:33

なるほど...。複雑になってくるとやっぱりどうしてもJavaScriptが必要になってきますよね... お教えいただき本当にありがとうございます。

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

あなたの回答