问题标签 [css-transitions]

我想在 Silverlight 中归档类似流畅的布局过渡，或者在 skydrive 中新的 css 过渡驱动的照片列表视图中看到的东西。我认为这可以通过某种方式使用 CSS3 来完成。

假设我有这样的事情：

项目可以是一些正方形或图像或任何东西。现在我们有一个浮动的项目列表，它在调整大小时包装项目。我想要实现的是让这些项目流畅地制作动画，当它们被包裹到下一行时，或者漂浮在中间为新添加的项目腾出位置。

这可能可以通过使用绝对定位的一些 javascript 魔术来完成，但是您将牺牲 css 布局并且必须手动完成所有操作。

有没有办法说类似的东西transition: left, top 1s ease-in-out;？

我尝试将项目包装在某个父 div 中，即浮动，而项目本身具有绝对定位，但该位置是相对于其父级的，因此那里没有过渡。

这是来自第 9 频道的视频，显示了几种效果，我说的是在 1:20 左右出现的那个。

我已经使用 CSS 过渡编写了一个图片库。如果 CSS 过渡不能被 modernizr 插件用作 picekd，它默认为淡入淡出效果。这种效果根本不起作用。任何人都可以看到代码的问题。CSS3 版本功能齐全。

编辑

我已将其重新制作为 addClass 和 removeClass，类似于 web-kit 的工作方式。JQuery 函数现在可以正常工作，没有控制台错误。虽然它不是特别流畅。使用 CSS-3 过渡，如果用户单击多个缩略图，即使效果进行到一半，图像也会轻轻过渡。JQuery 接缝堵塞然后开始跳来跳去。

对此有任何想法。

我正在寻找一个允许我通过 jQuery 的 // 函数轻松使用 CSS 转换addClass的库removeClass。toggleClass即我希望这些函数在 webkit 中什么都不做（除了添加一个 CSS 类），而是在 IE 中使用 jQuery 动画。jQueryUI 替换了这 3 个函数并接近我需要的，但它只适用于确切的元素（例如$('#myID').addClass('foo');不动画#myID.foo .someClass）

我环顾四周，找不到任何可以做到这一点的东西，希望有人知道一个:) 如果没有，解决方案需要：

1. 解析页面上所有样式表的 CSS 过渡属性
2. 将所有样式表与转换匹配（例如-webkit-transition）
3. 存储这些样式表
4. onaddClass等匹配当前和向下的树（例如.addedClass .someOtherClass）
5. 将动画应用于所有匹配的元素（或样式规则）

因此，如果有人知道任何现有的解析样式表（它们的文本）或动画规则（而不是单个节点）的解决方案，那也会很有帮助。

我正在尝试使用 css 在缩略图上进行悬停转换，以便在悬停时，背景渐变淡入。转换不起作用，但如果我只是将其更改为一个rgba()值，它就可以正常工作。不支持渐变吗？我也尝试使用图像，它也不会转换图像。

我知道这是可能的，就像在另一篇文章中那样，有人做到了，但我不知道到底是怎么回事。任何帮助>这里有一些 CSS 可以使用：

I'm using a combination of rules to achieve the CSS3 transition rule in as cross-browser compatible a way as possible: I'm using transition, -webkit-transition, -moz-transition, and -o-transition.

Is there a similar -ms-transition property for any version of Internet Explorer? Is there a proprietary filter for older versions of IE, similar to how the following rules work for opacity in IE 6-8?

我有一个相对复杂的按钮，我正在使用 CSS3 进行样式设置，除了过渡不起作用之外，它的外观和行为都符合我的预期。它应该在悬停等时消失，但它只是不工作，在 moz 歌剧和 chrome 中测试，没有运气。

这是小提琴http://jsfiddle.net/dsyne/DpsuN/1/的链接

任何帮助将不胜感激，我尝试了许多不同的事情。例如重新排序堆栈。我不确定顺序对转换是否重要？

编辑：错误的链接对不起

我尝试使用 webkit-animation 和 @-webkit-keyframes 制作动画。我有一个带有子 div 动画的 div。

当我的鼠标悬停在孩子上时，我会停止父母的 webkit 动画。

任何例子？

谢谢

WebKit 是使用 OpenGL 来渲染 CSS 过渡，还是使用软件渲染？

http://jsfiddle.net/nicktheandroid/PXdXr/1/

我想在 2 个不同的渐变之间制作动画，在悬停时淡入一个。我的示例显示了应该发生的事情，但它会立即发生，我希望它在它们之间消失。

仅供参考（这都在 jsfiddle 中）：

所以我在一个元素上附加了以下 CSS 过渡：

有没有办法在特定元素上禁用这些继承的转换？

似乎没有做这项工作。