CSS3ノンリニアアニメーションパス

Question

どのようにcss3で非線形アニメーションをしますか？

基本的に、私はそのまっすぐ道を、ビューポートの外から内箱を持参し、する必要がある場合は、その次のコードを使用して行うのに十分に簡単：

*{ 
    transition: transform 0.5s ease-in; 
} 

-- And some JS to trigger the animation with a transform: translate3d(0,300px,0); 

しかし、何が起こります要素は回転していますか？ 25度で言う？アニメーションがやや自然に見えるようにするには、25度のオフセットラインで進める必要があります。ちょうどトップダウン、または左右のアニメーションにすることはできません。

私はここに意味を持ちたいと思います...私が正しく理解していた場合

Answer 1

が、私はわからないんだけど...ここのデモhttp://jsfiddle.net/YMHT4/8/

私は斜めのパス上でアニメーション化する青色のボックスを取得しようとしているを見て、しかし、もしあなたは私が思っていることをしようとしていますが、その答えはとても簡単です。答えはとてもシンプルです。

function ani() 
{ 
    if (!state) 
    { 
     $('#otherbox').css('-webkit-transform', 'translate3d(100px,150px,0) rotate(25deg)'); 
     state=true; 
    } 
    else 
    { 
     $('#otherbox').css('-webkit-transform', 'translate3d(0,0,0) rotate(25deg)'); 
     state=false; 
    } 
} 

translate3d（x、y、z）でxとyの両方を変更すると、両方の寸法がアニメートされ、斜めのパスのアニメーションが得られます。あなたは彼の例でそれをしようとした場合

http://jsfiddle.net/YMHT4/17