在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的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.(是的,我知道,总菜鸟).

Answer 1

基本上是这样的.您可以正确设置它,但您只需要实际更改某些设置.检查这个jsfiddle DEMO.

我只使用javascript添加类或删除类.你可以简单地在css上做一些东西:hover标签也可以做同样的事情.

我主要是修改你的css以包含一个rotate(90deg)-webkit-transition.因此,这只适用于chrome和safari.如果你希望它在firefox中工作,那么你将不得不为旋转进行-moz-transition.