在CSS中重新创建MS Windows Phone Tiltin动画

Question

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

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

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

有人会帮助我吗？那真是太厉害了！

编辑 1：

a） 我仍在尝试在加载页面时运行 rotateRight 动画。我可能有一个在 .tile 类中使用 leftRotate 的黑客版本，并在页面加载时删除（并添加了右旋转）。

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 的东西。（是的，我知道，完全菜鸟）。

Answer 1

基本上是这样的。 您已经相当正确地设置了它，但您只需要实际更改一些设置。 看看这个jsfiddle演示。

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

我主要只是修改了你的css以包含一个旋转（90度）-webkit-transition。 因此，这仅适用于 chrome，可能适用于野生动物园。 如果你想让它在 Firefox 中工作，那么你必须为旋转做 -moz-transition。