【Web】ON,OFFスイッチをアニメーション付きで作ろうとして苦労した話

小生、初心者プログラマーなのですが、簡単なサイト作りなら記事サーフィンしながらで出来るだろうと思い、基礎からHTMLを学んだりしてこなかった。
その付けがでた今回の話。

オルタネイト式（ON、OFF切り替え式）なボタンをアニメーションをつけて用意しようとしたら苦労した。

#jQueryを使おうとする

javascript

$(document).ready(function(){
    $('#BottonID').on('click',function(){
        if($("#ID").hasClass("after")){
            $("#ID").removeClass("after")
        }else{
            $('#ID').addClass('after');
        }
    });
});

jQueryを使う事によってクリックごとにclassを追加し見た目を変えることは成功
ただ、transitionで時間指定してもアニメーションでは動いてくれなくて失敗

#CSSのanimation:を使おうとする。

css

.ani1{
    animation: mawaru 2s 0s forwards alternate;
}
.ani2{
    animation: mawaru 2s 0s forwards alternate-reverse;
}

@keyframes mawaru {
    0%{
        transform: rotate(0deg);   
    }
    100%{
        transform: rotate(180deg);   
    }
}

そしてクラスの切り替えをJQueryで行う

javascript

$(document).ready(function(){
    $('#BottonID').on('click',function(){
        if($("#ID").hasClass("ani1")){
            $("#ID").removeClass("ani1");
            $('#ID').addClass('ani2');
        }else{
            $("#ID").removeClass("ani2");
            $('#ID').addClass('ani1');
        }
    });
});

だが今回もアニメーションは動かず100%時の形で切り替わった

#HTMLの基礎　input type="checkbox"をつかう

html

<div class="botton">
<input type="checkbox" id="checkID">
        <label for="checkID" >
            <p class="ani"> </p>
        </label>
</div>

css

   .botton input[type="checkbox"] {
    display        : none;            /* チェックボックス非表示 */
  }
.ani{
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);

    transition: 0.5s;
}
.botton input:checked ~ label .ani {
    transform:  rotate(180deg);
 
  }

これで想定通りに切り替えで再生、リバースされるスイッチが出来ました。

結局JavaScriptも使わずに出来てしまったという。
やはり基本のHTMLは大事だと痛感……。