2

CSSアニメーションを使用して、私の小さなプロジェクトで「チルトイン」アニメーションを機能させようとしています。残念ながら、MSデモから移植することはできませんでした-間違いなくすべてのコードがあります：http：//m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

ページが読み込まれたときにタイルをフェードインさせようとしています。その部分だけです。一度は絶対に大丈夫です。ベンダーのキーフレームを定義する必要があることは理解していますが、私の試みは非常に貧弱であるため、jsFiddleの例ではそれらを貼り付けていません。

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

私を助けてくれる人はいますか？それは素晴らしいことを超えているでしょう！

編集1：

a）ページが読み込まれたときにrotateRightアニメーションを実行しようとしています。私はおそらく.tileクラスにleftRotateを含むハッキーなバージョンを持っていて、それはページロードで削除されました（そして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デモをチェックしてください。

クラスを追加または削除するためにJavaScriptを使用しているだけです。cssの：hoverタグでそのようなことを簡単に行うことができ、同じことを行うこともできます。

私は主にあなたのcssをrotate（90deg）-webkit-transitionを含むように変更しました。したがって、これはクロムとおそらくサファリでのみ機能します。Firefoxで動作させたい場合は、ローテーションのために-moz-transitionを実行する必要があります。

于 2012-06-15T20:03:54.083 に答える