问题标签 [css-transitions]

我尝试使用 css3 中的过渡效果创建下拉菜单效果。尽管在 safari 和 chrome 中，但在 firefox 和 opera 中没有产生效果

对于过渡，我使用了 o-transition:height 0.5s；-webkit-transition：高度 0.5s；-moz 过渡：高度 0.5s；

我使用的浏览器是 mozilla 3.6.15 和 opera 10.63 所以请帮助我为什么在 firefox 中没有发生过渡效果

谷歌在这方面有点让我失望（我认为是因为 PolyFill/Shim/Spackle 的术语目前是新的和多样化的）。我正在尝试为 webkit（现在是 RC FireFox 4 的）CSS 转换找到一个好的 JavaScript PolyFill 或 Shim。

我发现了Weston Ruter所做的这项工作，但它已经有一段时间没有更新了，并且使用浏览器检测而不是特征检测。

我还发现了FakeSmile，但它主要针对 SVG 动画。

有谁知道任何好的库来填充这个功能？最好是可以与Modernizr一起使用并且仍在积极开发中的东西。到目前为止，最好的选择似乎是从 Weston 的想法开始。

我正在寻找一种使用 css 动画的方法，但如果用户浏览器不做 css 动画 - 然后回退到使用 Jquery 动画。有没有一种简单的方法可以在 Jquery 中做到这一点？一个插件就可以了，如果它是一个小插件，但如果可能的话，我真的在寻找一些在 jquery 中执行此操作的方法。我想使用 css 动画的唯一原因是因为使用 css 动画时使用的处理器功率要低得多。

以这个dom为例。

如果我交替隐藏哪个内部 div，我可以触发 CSS3 转换（通过回流）吗？如果这是可能的，我可以添加许多内部 div 并在它们之间平滑地交替，而不必知道它们的大小。

我对 CSS 过渡的第一次尝试是使用类似于 iOS 的滑动面板系统。所有工作，但面板从左侧滑出并从左侧滑入。我在使用 iOS 样式的滑块，其中一个面板向左滑出，另一个面板从右侧滑入，如果一个面板向后滑动，则会发生相反的情况。

有任何想法吗，

奇妙

这就是我所拥有的：

但这附加到onmouseover和onmouseout动作，但没有办法控制它们吗？就像是：

在 YouTube 嵌入上使用 css-transforms 至少在 Safari 5 和 Firefox 4 中呈现黑色视频。Chrome 11 处理得很好。

我在这里做了一个例子：http: //jsfiddle.net/oskarrough/4vRzd/4/

我需要 css-transform 来做一些花哨的布局定位。有没有办法，css或js，破解它来显示视频？

我正在尝试制作一个页面布局，其中包含在导航到时滑入和滑出的部分。每个部分都填满屏幕（100% 宽度/高度），并以基于百分比的值绝对定位。

在随附的示例中，有四个部分，位置如下：

其中 [a] 为 0 0，[b] 为 0 100%，[c] 为 100% 100%，[d] 为 200% 100%。

现在，为了实现导航，我将所有部分放置在一个 100% x 100% 绝对定位的溢出隐藏容器中。当导航到某个部分时，容器的“顶部”和“左侧”值会动画到该部分偏移量的负值，例如，如果选择 [d]，则容器会动画到 -200% -100%。

奇怪的行为比比皆是！当导航到 0% 偏移量（向左或向上）时，转换工作正常。然而，其他组合（即负偏移）会导致看似不合逻辑（但始终如一）的怪癖。

亲自查看：http: //www.doronassayas.com/ypsite

这是一个摘要：

• [c] 和 [d] 到 [a] 或 [b] 都可以正常工作。
• [a] 到 [b] 和 [a] 到 [d]：跳到结尾，跳回到开头并开始动画。
• [a] 和 [b] 到 [c] 是最奇怪的 - 在过渡开始之前，整个主体（或其他一些高级元素？）弹出到一些无法通过 CSS 追踪的视觉偏移（在 Firebug 和其他开发中不可见工具）。因此，我们不是在 [c] 处结束，而是在 [d] 处结束（视觉上），即使 CSS 值清楚地表明我们应该在 [c] 处。执行随机操作（例如单击 Firebug 层次结构）会将视图重置到正确的位置。怎么回事？

在 Firefox 4、Chrome 10 和 Safari 5 中对此进行了测试，并且在所有浏览器中都出现了相同的行为，无论是使用 jQuery.animate() 还是Louis Remi 非常酷的 jQuery.transition 插件，它只是将 -prefix-transition 应用于容器调用 animate() 时使用新的偏移值。

陌生感的一致性让我很感兴趣。有任何想法吗？

非常感谢任何帮助。

是否可以在“状态”之间使用具有不同延迟切换的 CSS3 转换？例如，我试图让一个元素在悬停时立即更高，然后在“mouseout”上等待一秒钟，然后再滑回元素的初始高度。

演示页面： jsfiddle.net/RTj9K（在右上角悬停黑框）

CSS： #bar { transition:.4s ease-out 0, 1s; }

我认为最后的时间安排与延迟有关，但它似乎并没有像我想象的那样工作。

我在这里要做的是在这个 div 悬停时进行转换。

一切正常，只是过渡什么都不做。我尝试使用transition: all,transition: opacity和的过渡属性transition: background。但它们都不起作用。

是display酒店在做这件事。因为当我把它拿出来时，它就起作用了。我还能如何解决这个问题？因为我显然想保留该display属性，因为它适用于所有浏览器，无论老少。

这是我目前所拥有的：

我不介意我是否使用不透明度或背景或其他任何东西来控制褪色，我只是不知道还能做什么。