トグルボタンを変形させたい

Question

前提・実現したいこと

ボタンを押すとメニューが全画面に現れようにしています。ボタンは初期状態は３本線とし、開いた時にバツになるようなアニメーションを作りたいです。

発生している問題・エラーメッセージ

開いた時も3本線のままでアニメーションができません。

該当のソースコード

<div class="navbar_toggle">
        <span class="navbar_toggle_icon"></span>
        <span class="navbar_toggle_icon"></span>
        <span class="navbar_toggle_icon"></span>
    </div>

.navbar_toggle{
        z-index:9999;
        position: absolute;
        right: 20px;
        top: 45px;
        cursor: pointer;
      }

    .navbar_toggle_icon {
        position: relative;
        display: block;
        height: 2px;
        width: 30px;
        background: $black;
        -webkit-transition: ease .5s;
        transition: ease .5s;
        z-index: 1000;
    }
    .navbar_toggle_icon:nth-child(1) {
        top: 0;
    }

    .navbar_toggle_icon:nth-child(2) {
        margin: 8px 0;
    }
    .navbar_toggle_icon:nth-child(3) {
        top: 0;
    }
    /*OPEN時の動き*/
      .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
        top: 10px;
        -webkit-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
       }
       .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
        opacity: 0;
       }
       .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
        top: -10px;
        -webkit-transform: translateY(8px) rotate(-45deg);
        transform: translateY(8px) rotate(-45deg);
       }
    
    

window.addEventListener('DOMContentLoaded', function(){
    $('.navbar_toggle').on('click',function(){
        $('.navbar_toggle').toggleClass('open');
        $('navbar_toggle_icon').css('background','#fff')
        $('.nav').fadeToggle();
    });
    });

試したこと

参考コードコピペしたり何度も確認したのですがわかりませんでした。。

補足情報（FW/ツールのバージョンなど）

環境：Mac

Comments

[x_x]

そのままで動いているように見えます。色の変化のことを言っていますか？

[kaaaarin]

3本線がそのままになります．．
開発ツールで確認すると、stylesに.navbar_toggle.open .navbar_toggle_icon:nth-child(1)が出てくるはずなのですが、出てきません..

[x_x]

これは動きますか？
https://jsfiddle.net/hp0853L7/

[kaaaarin]

動きました！！
自身のコードと何が違うのか、検証しました。
再々度確認したところ、sassで書いていたので、入れ子が間違えていました..
teratailにはなぜか正しく記入していたようです..
本当にありがとうございました。
参考サイトを参照していただき、

Answer 1

参考

• 便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール

Comments

[yambejp]

svgファイルを2つ用意してアニメーションを作るところまで
紹介されています

[kaaaarin]

このような便利のツールがあることを知りませんでした！！
ありがとうございます。参考にさせていただきます。