2

我正在尝试让“倾斜”动画在我的一个使用 CSS 动画的小项目上工作。不幸的是，我无法从 MS Demo 移植它 - 毫无疑问，所有代码都在那里： http: //m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

我试图让瓷砖在页面加载时淡入，只是那个部分。一次绝对没问题。我知道我需要定义供应商关键帧，但我的尝试非常糟糕，以至于我没有将它们粘贴到 jsFiddle 的示例中：

http://jsfiddle.net/qCQQD/2/

有谁会帮助我吗？那真是太棒了！

编辑1：

a）我仍在尝试在页面加载时运行 rotateRight 动画。我可能在 .tile 类中有一个带有leftRotate 的hacky 版本，并且在页面加载时将其删除（并添加了rightRotate）。

b) 这

.tile:active {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
}

由于添加了代码，Chrome 变得超级慢，我怎样才能让它恢复正常？

我怀疑这需要#tile 的某种时间范围

-webkit-transition: 300ms 160ms;

它现在看起来像一个慢动作。我将尝试添加类似 -webkit-transition: 50ms 的内容。（是的，我知道，总菜鸟）。

4

1 回答 1

5

基本上是这样的。您已将其设置得相当正确，但您只需要实际更改一些设置。检查这个 jsfiddle DEMO。

我只使用 javascript 添加类或删除类。你可以简单地在 css 中的 :hover 标签上做这种事情，它也会做同样的事情。

我主要只是修改了你的 css 以包含一个 rotate(90deg) -webkit-transition。因此，这只适用于 chrome 和可能的 safari。如果您希望它在 Firefox 中工作，那么您必须执行 -moz-transition 以进行旋转。

于 2012-06-15T20:03:54.083 回答