问题标签 [css-transitions]

我注意到一个网站似乎在背景上有非常好的颜色过渡效果。当一个链接被按下时，背景会改变颜色，但它似乎不是即时的。似乎发生了转变。。

http://fuelbrandinc.com/#/about

我想知道是否有人知道如何复制此功能？

谢谢，

可能重复：
iphone webkit css 动画导致闪烁

出于某种原因，就在我的 webkit-transform 属性动画出现之前，有轻微的闪烁。这是我正在做的事情：

CSS：

JavaScript：

就在过渡发生之前，有一个闪烁。知道为什么会这样，我该如何解决这个问题？

谢谢！

更新：这只发生在 Safari 中。尽管动画确实有效，但它不会在 Chrome 中发生。

只是想知道是否有任何 jquery 插件，当您的鼠标悬停在图像上时，该图像的大小会增加，如果您的鼠标不在图像上，它的大小会减小，这一切都是平滑的过渡。谢谢！

我正在尝试<ul>使用 CSS 过渡进行向下滑动。

<ul>开始height: 0;于。悬停时，高度设置为height:auto;。然而，这导致它只是出现，而不是过渡，

如果我从height: 40px;到height: auto;，那么它会滑到height: 0;，然后突然跳到正确的高度。

如果不使用 JavaScript，我还能如何做到这一点？

我想为我的 html 对象设置几个转换选项，但持续时间和延迟不同。

如果我尝试使用类似的东西：

然后我将有不同的时间函数用于变换和不透明度，但我可以为旋转和缩放设置不同的选项，例如旋转 10 秒和缩放 20 秒吗？

我想知道是否有人知道 webkit 何时会支持渐变过渡？
例如，以下代码在 Chrome 6 中不起作用（假设 grad-transition 是一个链接）：

如何启用-webkit-animation:before 和 :after 伪元素？

您可以在http://jsfiddle.net/4rnsx/中看到它不适用于 :before 和 :after。
在这里，我尝试使用 Mootools http://jsfiddle.net/6bzCS/启用此功能。


Mozilla - 将在 Firefox 4 中支持它https://developer.mozilla.org/en/CSS/-moz-transition-property
W3C - CSS3 支持所有元素的过渡属性，:before 和 :after 伪元素http:// www.w3.org/TR/css3-transitions/#transition-property


更新：如何启用fadein，fadeout用于 CSS3 工具提示http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using -css3-and-jquery/和演示？

我试图找出当鼠标悬停在上面时，这些照片如何在这个网站上显示它们的真实颜色而不是黑白：http: //2010.dconstruct.org/。我认为拥有两个版本的图像并不是一件简单的事情，但我真的不确定。

我将不胜感激任何帮助！

CSS3 -webkit-transition 阻塞了多个 box-shadow 值和 text-shadow 值。(Chrome & Safari)

更具体地说，我有两种情况......

1. 我的文本有一个文档标题，该标题具有三个文本阴影（用于显示深度）。我还使用 -webkit-transition 规则来更改悬停时文本阴影的颜色，使其在悬停时看起来发光。

2. 我有链接，我以与上面相同的方式使用 box-shadow 规则，具有三个深度效果值。还在这里使用 -webkit-transition 来更改按钮和文本的颜色以实现悬停效果。

问题：对于上述两种情况，当将鼠标悬停在元素上时，webkit 似乎一次将转换呈现为一个，因此这些值不会同时全部淡入它们的新值。相反，它们会随着每一个的渲染出现——一个接一个，你会看到这是一个非常尴尬的过渡。

我有几个实例，这里是其中一些的链接：（确保在 Chrome 或 Safari 中查看）

- 文本阴影过渡：h1 页的悬停（“治愈的礼物”文本）：http ://cure.org/goh

-Box-shadow 过渡：悬停在第一张幻灯片号召性用语（“阅读更多”按钮）：http ://cure.org

-Box-shadow 过渡：悬停在页脚导航链接（关于、Rods 等）：http ://tuscaroratackle.com

最后，这是我正在使用的代码示例：（不是来自任何网站，只是我为这个问题构建的一个示例；在这里查看它：http: //joelglovier.com/test/webkit-shadow-transition-bug .html )

所以这里的问题真的是有什么办法可以防止这种有序的渲染，比如在我的 CSS 中使用不同的语法？（例如多个 box-shadow 值的特定顺序，或者使用多个 box-shadow 声明而不是将它们全部添加到一个规则中？）

2011 年 5 月 9 日更新：该错误已报告给 Webkit（请参阅下面 Husar 的评论）。此外，我看到 Chrome 的最新版本（特别是我当前的 10.0.648.205 版本）现在正在呈现平滑过渡，有效地消除了错误。然而 Safari（版本 5.0.5 (6533.21.1)）仍然显示错误的渲染。

我注意到在使用硬件加速优化 iPad 上使用的动画时，我似乎遇到了一个我无法完全解决的问题。如果您正在应用诸如翻译之类的 webkit 转换，尽管动画运行得很好，但如果在动画发生的中间用户滚动页面，当他们释放它会导致动画卡顿，从而恢复到其原始位置并尝试继续它的动画到它的终点。

我一直在到处寻找解决这个问题的方法，在 iPad 商店也看到了它！如果您手头有 iPad 并导航到，例如：http ://webkit.org/demos/transitions-and-transforms/ ，如果您选择一个项目，则在按钮动画完成之前拖动页面（滚动）然后松开它，你会看到动画闪烁回到原来的位置，然后重复直到完成。

我能够解决这个问题的唯一方法是当一个 touchmove 事件发生时，我告诉动画只是停留在它的原始位置，这会阻止它在释放时尝试重复转换，甚至试图告诉它再次去哪里会导致它无论如何都恢复（看到css转换在技术上似乎无法停止）。

有没有人找到任何解决这个问题的方法，我很确定这是 iPad 上的一个错误，而不是动画问题（这不涉及关于 preserve-3d 和你有什么问题），或者我是否应该报告这是一个问题。

谢谢！