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

我正在尝试让“倾斜”动画在我的一个小项目中使用CSS动画。不幸的是，我无法从MS演示中移植它，毫无疑问，所有代码都在那里：

我试图让瓷砖淡入时，页面加载，只是这一部分。一次绝对好。我知道我需要定义供应商的关键帧，但是我的尝试太差了，以至于我没有在JSFIDLE的示例中粘贴它们：

有人能帮我吗？那太棒了

编辑1：

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

b） 这个

由于添加了代码，Chrome的速度非常慢，我如何才能让它恢复正常

我怀疑这需要一定的时间

---

现在看起来像是慢动作。我将尝试添加类似-webkit transition:50ms的内容。（是的，我知道，完全没有问题）。

基本上就是这样。您的设置相当正确，但您只需要实际更改一些设置。检查这个JSFIDLE

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

---

我主要是修改了你的css，加入了一个旋转（90度）的webkit转换。因此，这只适用于chrome，可能也适用于safari。如果你想让它在firefox中工作，那么你必须为轮换做-moz转换。

Sweet，这看起来很棒@jeschafe。还有两件事@jeschafe：现在我仍在尝试让它们在页面加载时淡入。我尝试了这个

$（window.load（function（）{$（“.tile”）.addClass（“rightRotate”）；}）但这可能不起作用，因为加载页面时磁贴已经存在？2） 此
#tile1{-webkit-transform-origin-x:-8px；-webkit transition:300ms 0ms；}
现在影响了我的互动程序的活动状态的响应性，我如何将其恢复（
.tile:active{-webkit transform:scale（0.97）；-moz transform:scale（0.97）}
）？请更正加载页面时互动程序已经存在。我认为您可能需要仔细阅读一下CSS3转换。基本上，一旦你放置了一个过渡（-moz或-webkit），它会影响几乎所有的样式更改，并会尝试为它设置动画。我已经为您创建了另一个演示，它可以在加载时运行。我不确定您所说的
现在影响了我的互动程序的活动状态的响应性，我如何才能恢复它（.tile:active{-webkit transform:scale（0.97）；-moz transform:scale（0.97）；}
@jescafe。谢谢你，我或多或少也有过同样的效果，效果相当不错。毫不奇怪，没有人会理解这些词。请查看原始帖子中的编辑。谢谢！奇怪的是，Firefox 35中没有这样的动画。
.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);
}

-webkit-transition: 300ms 160ms;