Animation 多个css3转换冲突

我有一个主导航，它是一个只有CSS3的下拉菜单，当子导航出现时，它有一个漂亮的动画

我在同一页上还有一个滑块（flexslider），也是CSS3唯一的项目

我的问题是动画相互干扰。将鼠标悬停在导航项上后，该项的subnav菜单仅在滑块设置为滑动到下一个图像时显示，因此两个动画同时发生，而不是相互独立

这里有一个指向我所说的页面的链接：

---

干杯

似乎Safari不喜欢设置可见性的动画，请尝试仅设置所需属性的动画

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;
}

---

这会解决你的问题。虽然这确实是一个非常奇怪的错误

似乎Safari不喜欢设置可见性的动画，请尝试仅设置所需属性的动画

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;
}

---

这会解决你的问题。虽然这确实是一个非常奇怪的错误

我不知道你的意思是什么，页面似乎运行良好，滑块和子菜单在Chrome和FF上独立动画。谢谢你的回复，也许只有在那时它才是safari的东西。我刚刚在Chrome上测试了它，效果很好，Firefox没有safari那么差，但是动画很不稳定。我在mac电脑上，不确定这是否相关。我不确定你的意思是什么，页面似乎运行良好，滑块和子菜单在Chrome和FF上独立动画。谢谢你的回复，也许只有在那时它才是safari。我刚刚在Chrome上测试了它，效果很好，Firefox没有safari那么差，但是动画很不稳定。我在mac电脑上，不确定这是否有关联。