何らかの理由でCSSトランジションがメディアクエリで動作しない

Question

メディアクエリで動作するトランジションを取得できません。彼らは私の要素にホバーを追加するとうまく動作します。これは私のコードのようです。 応答ナビゲーションバー

<main> 
     <nav> 
      <div class="nav-cont"> 
       <a id="logo">Breiden Busch</a> 
       <a id="hamburger"></a> 
      </div> 
      <div id="list"> 
       <a id="about" class="nav-buttons">About</a> 
       <a id="contact" class="nav-buttons">Contact</a> 
       <a id="social" class="nav-buttons">Social</a> 
      </div> 
     </nav> 
    </main> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
    <script src="./js/app.js"></script> 
</body> 
</html> 

#logo { 
line-height: 51px; 
margin-bottom: 0; 
font-weight: 600; 
margin-left: 10px; 
font-size: 18px; 
transition: .5s; 
} 


@media (min-width: 600px) { 

#hamburger { 
    display: none; 
} 

nav { 
    background: none; 
    display: flex; 
} 

#logo { 
    background: blue; 
} 

Answer 1

<div id="box">Resize your browser into 600px</div> 
 
<style> 
 
    #box { 
 
     width: 100px; 
 
     height: 100px; 
 
     background: blue; 
 
     color: white; 
 
     transition: .3s ease-in; 
 
    } 
 

 
    @media (max-width: 600px) { 
 
     #box { 
 
      background: red; 
 
     } 
 
    } 
 
</style>

Answer 2

私は理由を説明することはできませんが、それは理由nav要素にdisplay: flex;財産でした。あなたはそれを削除するか、メディアクエリのそれを移動した場合、それが正常に動作します：

@media (min-width: 600px) { 
    #hamburger { 
     display: none; 
    } 

    nav { 
     background: none; 
    } 

    #logo { 
     background: blue; 
    } 
} 

See this fiddle