多个css3转换冲突答案

【问题标题】：multiple css3 transitions conflict多个css3转换冲突
【发布时间】：2012-03-29 11:10:54
【问题描述】：

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

我在同一页面上还有一个滑块 (flexslider)，它也是 CSS3 唯一的项目。

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

这是我正在谈论的页面的链接：http://supermarchepa.com/v3/eng/index.html

干杯。

【问题讨论】：

我不确定你的意思，页面似乎运行良好，并且滑块和子菜单在 Chrome 和 FF 上独立动画。
感谢您的回复，也许这只是一个野生动物园的事情。我刚刚在 Chrome 上对其进行了测试，它运行良好，Firefox 没有 safari 差，但动画很不稳定。我在 Mac 上，不确定是否相关。

标签： animation css conflict

【解决方案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;
}

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

【讨论】：