SVG CSS 애니메이션 전환 후 CSS 전환이 시작됩니다.

Question

안녕하세요. Google 크롬 브라우저에서 문제를 해결할 수 없습니다. 문제 : SVG 전환이 태그 및 SPAN 태그 전환 완료 후 시작됩니다. 테스트를 마쳤습니다. IE 11하지만 아무 문제가없는 것 같습니다.

나는 모든 전환을 한 지점에서 시작하고 모두 0.15 초의 시간 간격을주기 때문에 함께 끝날 것으로 예상합니다.

내 코드 :

#mainNav { 
 
    height: 42px; 
 
    background-color: #f5f5f5; 
 
} 
 

 
#mainNav * { 
 
    transition: all 0.15s ease-out; 
 
} 
 

 
#mainNav > a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    position: relative; 
 
    font: 13px/42px "IranYekanWebLight"; 
 
    font-weight: 700; 
 
    color: #575757; 
 
    overflow: hidden; 
 
} 
 

 
#mainNav > a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
#mainNav > a:hover span { 
 
    font-size: 17px; 
 
    padding-right: 55px; 
 
} 
 

 
#mainNav > a:hover svg { 
 
    left: 35%; 
 
    fill: #fff; 
 
} 
 

 
#mainNav span { 
 
    padding: 0 30px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#mainNav svg { 
 
    height: 90px; 
 
    position: absolute; 
 
    bottom: -90%; 
 
    left: 10%; 
 
    fill: #e3e3e3; 
 
    z-index: 0; 
 
} 
 

 
#mainNav > a.aqua { 
 
    border-top: 4px solid #1cbbb4; 
 
}

<nav id="mainNav"> 
 
    <a class="aqua" href="#"> 
 
     <span>خانه</span> 
 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> 
 
     <g> 
 
      <g> 
 
      <g> 
 
       <path d="M26,26.4H14c-0.8,0-1.5-0.7-1.5-1.5v-5c0-0.3-0.2-0.5-0.5-0.5h-1c-0.2,0-0.4-0.1-0.5-0.3c-0.1-0.2,0-0.4,0.2-0.6l8.4-6.5 
 
       c0.5-0.4,1.3-0.4,1.8,0l8.4,6.5c0.2,0.1,0.2,0.4,0.2,0.6c-0.1,0.2-0.3,0.3-0.5,0.3h-1c-0.3,0-0.5,0.2-0.5,0.5v5 
 
       C27.5,25.7,26.8,26.4,26,26.4z M12.4,18.4c0.6,0.2,1.1,0.8,1.1,1.4v5c0,0.3,0.2,0.5,0.5,0.5h12c0.3,0,0.5-0.2,0.5-0.5v-5 
 
       c0-0.7,0.5-1.3,1.1-1.4l-7.3-5.7c-0.2-0.1-0.4-0.1-0.6,0L12.4,18.4z"/> 
 
      </g> 
 
      <g> 
 
       <path d="M21.5,25.9v-5c0-0.3-0.2-0.5-0.5-0.5h-2c-0.3,0-0.5,0.2-0.5,0.5v5h-1v-5c0-0.8,0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5 
 
       v5H21.5z"/> 
 
      </g> 
 
      </g> 
 
     </g> 
 
     </svg> 
 
    </a> 
 
</nav>

Answer 1

난 당신 코드로 잘못 알고 생각합니다. 서브 노드가 아닌 모든 자식 노드에만 애니메이션을 적용하려는 경우 #mainNav의 모든 자식 노드로 전환을 적용하고 있습니다. 실제로 크롬 버그 같은 소리

#mainNav a > * { 
    transition: all 0.15s ease-out; 
}