ハンバーガーのアイコンが正常に動作しないのはなぜですか？

Question

https://codepen.io/anon/pen/QNqgMo

なぜトップラインにアニメーションが表示されないのですか？コード内の何が間違っているか教えてもらえますか？ここで

おかげ

#hamburger-icon.active .line-1 { 
transform: translateY(25px) translateX(0) rotate(45deg); 
-webkit-transform: translateY(25px) translateX(0) rotate(45deg); 
-moz-transform: translateY(25px) translateX(0) rotate(45deg); 
} 
#hamburger-icon.active .line-2 { 
opacity: 0; 
} 
#hamburger-icon.active .line-3 { 
transform: translateY(-10px) translateX(0) rotate(-45deg); 
-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); 
-moz-transform: translateY(-10px) translateX(0) rotate(-45deg); 

Answer 1

あなたが行く：

See this code

#hamburger-icon { 
    position: absolute; 
    top: 25px; 
    left: 25px; 
    height: 27px; 
    width: 50px; 
    cursor: pointer; 
    display: block; 


} 

#hamburger-icon .line { 

    position: absolute; 
    display: block; 
    background: #c8c8c8; 
    width: 22px; 
    height: 2px; 
    left: 0; 
    transition: all 0.4s; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 

} 

    #hamburger-icon .line.line-1 { 
    top: 0px; 
    } 

    #hamburger-icon .line.line-2 { 
    top: 7px; 
    } 

    #hamburger-icon .line.line-3 { 
    top: 14px; 
    } 


#hamburger-icon.active .line-1 { 
    transform: translateY(-10px) translateX(0) rotate(45deg); 
    -webkit-transform: translateY(-10px) translateX(0) rotate(45deg); 
    -moz-transform: translateY(-10px) translateX(0) rotate(45deg); 
} 
#hamburger-icon.active .line-2 { 
    opacity: 0; 
} 
#hamburger-icon.active .line-3 { 
    transform: translateY(-10px) translateX(0) rotate(-45deg); 
    -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); 
    -moz-transform: translateY(-10px) translateX(0) rotate(-45deg); 
} 

それは

Answer 2

を働いていなかったので、あなたはあなたのコードにあまりにも多くの1つのブラケットを追加あり

の後の余分なブラケット

#hamburger-icon .line.line-3 { 
    top: 14px; 
} 

ちょうどそれを削除し、

#hamburger-icon { 
    position: absolute; 
    top: 25px; 
    left: 25px; 
    height: 27px; 
    width: 50px; 
    cursor: pointer; 
    display: block; 


} 

#hamburger-icon .line { 

    position: absolute; 
    display: block; 
    background: #c8c8c8; 
    width: 22px; 
    height: 2px; 
    left: 0; 
    transition: all 0.4s; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 

} 

    #hamburger-icon .line.line-1 { 
    top: 0px; 
    } 

    #hamburger-icon .line.line-2 { 
    top: 7px; 
    } 

    #hamburger-icon .line.line-3 { 
    top: 14px; 
    } 



#hamburger-icon.active .line-1 { 
    transform: translateY(25px) translateX(0) rotate(45deg); 
    -webkit-transform: translateY(25px) translateX(0) rotate(45deg); 
    -moz-transform: translateY(25px) translateX(0) rotate(45deg); 
} 
#hamburger-icon.active .line-2 { 
    opacity: 0; 
} 
#hamburger-icon.active .line-3 { 
    transform: translateY(-10px) translateX(0) rotate(-45deg); 
    -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); 
    -moz-transform: translateY(-10px) translateX(0) rotate(-45deg); 
}