问题标签 [css-transitions]

我正在尝试创建一个鼠标悬停效果，将顶层向左滑动并使用 CSS3 显示底层。该代码在 Chrome 中有效，但在 Firefox 中无效……我又做了一些愚蠢的事情吗？谢谢你的帮助！

编辑：我一定是做错了什么，因为即使我省略了转换代码，当我将鼠标悬停在 Firefox 中的“图层”上时也不会发生任何事情......:(

编码：

样式：

我想慢慢放大图像。我的想法在 webkit 中效果很好，但在 Firefox 中却不行。有人知道为什么或如何使它更好吗？

我正在构建一个进度条控件，并且我正在研究它实际上并未显示进度，而只是显示“正在发生某事”的旋转指示器的情况。我的设计基本上是交替的斜条纹，基本上是一个有点像这样的理发杆，但是“旋转”：

希望尽可能多地卸载到渲染引擎，我想为此使用 CSS 过渡。支持旧浏览器对我来说不是问题。

所以，我的第一个想法是基本上这样做：

...然后，当它被渲染到屏幕上时，使用 Javascript 基本上做到这一点：

是否存在以下性能问题：

1. 过渡那么久
2. 有background-position: -1000000px 0?

或者，您有更好的解决方案吗？

JQuery addclass 根本没有添加类，因此 web-kit 转换不起作用。在下面的函数中，第一个添加类正在工作，而第二个则没有。到底是怎么回事。

功能

CSS

关闭的内容运行良好。.slideback 不是。这是我制作的一个非常相似的小提琴。 http://jsfiddle.net/4WmJz/15/

有任何想法吗 。

奇妙

我正在尝试创建一个 jquery 启动画面，我在这里找到了一个完美的教程：http: //tutorialzine.com/2010/11/apple-style-splash-screen-jquery/但在修改脚本时需要一些帮助.

目前，如果您在此处查看：http ://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/苹果图像上方的文本图像会发生变化，但我想添加几个淡入的图像一个接一个，但也保留在屏幕上，与教程中的当前脚本不同，它淡入一个图像并淡出我想淡入图像#1 等待 2 秒淡入 img #2 等等，但保留每个图像屏幕上。

感谢所有帮助。

我已将我的问题缩小到一个相当简单的案例。这有效（至少在 Chrome 中），显示一个“弹出窗口”，该窗口大部分在屏幕外，屏幕右侧有一部分。当我将鼠标悬停在可见部分上时，整个弹出窗口会滑入视图：

但是，如果我将那个确切的 CSS 移动到外部样式表中：

popout.css：

...效果保持不变，但在页面加载时弹出窗口出现“弹出”并缓和屏幕。将样式直接放在<style>html 页面中的 a 中，就像在第一个示例中一样，这不会发生；弹出窗口开始“关闭屏幕”，即left: -180px如我所料。

I'm wondering if this is a "flash of unstyled content", with the added annoyance that because of the transition effect, it's actually a very obvious, slow effect?

Can anyone tell me for sure why this happens, and what's the least hacky way to avoid it?

Because of the way jsfiddle works, I can't reproduce the problem there, unfortunately.

我的主页在这里： http ://thenozzle.net/

页面顶部的标志是一个精灵，在顶部和底部之间切换以产生发光效果。这是通过 css 过渡和 :hover 伪元素完成的。

但是，我最近添加了“projekktor”HMTL5 视频播放器。它工作得非常好，但是如果您开始播放视频，然后将徽标悬停，当您将鼠标悬停时它会出现故障。

此外，谷歌浏览器不会播放来自 ea.com 战地 3 剪辑的视频。Chrome不会玩，这两件事让我发疯。他们可能有关系吗？我究竟做错了什么？

Projekktor 主页： http: //www.projekktor.com/

它在每个浏览器中的表现都不同。在 Firefox 中速度非常慢，但它可以播放。在 Safari 中完美，Chrome 根本无法播放，但 Safari 有故障标志。有任何想法吗？

使用 CSS3 我看不出为什么基于 CSS 的 Ken Burns 效果不起作用。我的第一次尝试涉及使用 Jquery 向背景图像添加一个新类。

这有效，但非常生涩。所以我正在考虑一种不同的方法。如果从一开始就用类动画设置图像会怎么样。我不熟悉 CSS3 动画，只熟悉过渡，但其目的是将永久类应用于一系列图像，使它们一直顺利地转换为 Ken Burn。

我为任何想尝试的人准备了一个可爱的试验场。 http://jsfiddle.net/gxUhH/10/

所有设置都基于我的初始代码。

有任何想法吗？

奇妙

编辑 -

好吧，伙计们，我发现这看起来很顺利。我看不到的是它有什么不同。他们正在使用 web-kit 中的翻译功能，但是当我尝试它时它就跳了。看一看。http://thing13.net/2010/02/css3-ken-burns-effect-2/

在这个社区的其他人的帮助下，我构建了一个 CSS3 Ken Burn 效果。在我们切换到翻译动画之前，它很生涩。现在非常顺利。

http://jsfiddle.net/gxUhH/52/

现在的问题是，当页面在触摸屏设备上滚动时，它会变得生涩。这大概是因为需要额外的处理能力。

我认为解决方案是在滚动时暂停动画，然后在滚动完成后再次播放。我不知道如何做到这一点。我也很乐意听到关于此事的任何其他建议。

上面的小提琴将向您展示所有功能。目前只有 WebKit。

有任何想法吗？

奇妙

可以在这里看到一个活生生的例子。

红色方块（显示）直接位于绿色方块上方（隐藏为溢出）。单击正方形，两个彩色正方形立即变得完全透明。另外，红色方块的高度设置为0；这会触发一个过渡，但由于红色方块现在是透明的，所以过渡看不到。

在再次单击方块之前，检查toggle函数。查看 JavaScript，我希望红色方块的高度在不触发转换的情况下重置为其原始值。应该抑制过渡，因为在none更改高度时临时设置了过渡属性。

现在再次单击正方形。两个彩色方块都会立即变得完全不透明，但红色方块会随着高度从 0 过渡到原始值而向下滑动。就好像在toggle元素可见之前，函数不会删除内联样式设置的高度，到那时，过渡属性也已被重置。

触发回流似乎会强制应用高度变化。（取消注释包含offsetParent要测试的行。）这种行为发生在浏览器（至少 Chrome 和 Safari、Firefox 和 Opera）中，所以我想知道它是否不是某些规范的一部分。我检查了CSS 过渡模块但没有成功。任何想法为什么会发生这种行为，以及为什么它在实现之间如此一致？