CSS3トランジションなしでオブジェクトの位置を変換する

Question

オブジェクトを取得し、そのrotateYプロパティをアニメーション化せずにプリセットされたトランジションに変換する簡単な方法を探しています。

それは少しのようになります。後でコード

$(this).css("-webkit-transform","rotateY(0)"); 
$(this).css("-webkit-transition","0"); 

で、その後

$(this).css("-webkit-transform","rotateY(180deg)"); 
$(this).css("-webkit-transition","10s"); 

をしかし、上記による、それは設定とする必要があるという事実に私のためではない、かなりの作業を行いますトランジションアニメーションのタイミングをリセットします。

私は、オブジェクトを邪魔することなく単にポイントaからbに移動するという解決策が必要です。私はトランジション/変換プレフィックスを経由せずにrotateYプロパティを設定する方法を見つけることができないようです。

事前に感謝の意を表します。

Answer 1

あなたはCSS3アニメーションのように聞こえますか？

だから... ...あなたのケースでは、アニメーションは、それが終了していますポイントになりたいので、あなたのコードは、この

よう

$(this).css("-webkit-animation", "someanimation 10s forwards"); 

を見てしまうCSS3アニメーションで転送プロパティは、あなたのそのエンドポイントを確保アニメーションは永続的にレンダリングされるスタイルなので、アニメーションはページをアンロードするまでは終了状態のままです。あなたのCSSで

は、あなたがこのコードは、上記のいずれかのクラスまたはIDに特定ではありません

@-webkit-keyframes someanimation { <br /> 
    0% {-webkit-transform: rotateY(180deg);} <br /> 
    100% {-webkit-transform: rotateY(0deg);} <br /> 
} 

追加する必要があります。それはそれ自身のセクションです。

ここW3C Standard

そして、ここでは、記事Smashing Mag

Answer 2

だCSS3アニメーションにいくつかのドキュメントはここで、それはあなたが望むものであるのです -

http://jsfiddle.net/rq0574yz/2/

私は 'S' を追加し、border-right: 5px solid redを設定していますこれにより、実際に移行することなく元の位置に戻ることがわかります。 実際には移行が行われますが、キーフレームでは、特定の移行時間を数ミリ秒（20ミリ秒）に短縮して、ユーザーがそれを認識せず、すぐには戻ってこないと考えています。