여러 CSS3 전환이 충돌합니다.

Question

CSS3 전용 드롭 다운 메뉴 인 기본 탐색 메뉴와 하위 애니메이션이 표시되는 멋진 애니메이션이 나타납니다.

나는 또한 동일한 페이지에 CSS3 전용 항목 인 슬라이더 (flexslider)가 있습니다.

내 문제는 애니메이션이 서로 간섭한다는 것입니다. 탐색 항목 위로 마우스를 이동하면 슬라이더가 다음 이미지로 슬라이드되도록 설정되면 해당 항목의 하위 메뉴가 표시되므로 두 애니메이션이 서로 독립적 인 것이 아니라 동시에 발생합니다. http://supermarchepa.com/v3/eng/index.html

건배 :

는 여기에 대해 이야기하고있는 페이지에 대한 링크입니다.

Answer 1

Safari는 visibility에 애니메이션 효과가있는 것 같지 않은데 필요한 애니메이션 만 시도해보십시오.

nav ul#nav ul { 
-webkit-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-moz-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-ms-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-o-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
} 

이렇게하면 문제가 해결됩니다. 참으로 이상한 버그입니다.