アニメーション内の他のトランスフォームと混在したときの奇妙な回転変換の動作

Question

私はいくつかの基本的なCSSアニメーションを扱っており、さまざまな変換のレンダリングロジックを理解できないようです。次のアニメーションを実行すると、ターゲットは期待どおり時計回りに0〜350°回転します。私は他の変換に追加するときに

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(350deg); 
    } 
} 

しかし、回転が（350deg反時計回りに0から行く）のショートカットを服用開始します。これにより、0〜360°の範囲で回転しても目に見える回転は生じません。ここでは例です：

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: translate(500px) rotate(350deg); 
    } 
} 

中間キーフレームが回転問題のいくつかを解決するが、複数の変換で使用した場合でも、より多くの台無し。

どのようにしてこの問題を解決できますか？つまり、回転の動作を変更せずに回転する正方形に平行移動を追加するにはどうすればよいですか？（CCWの回転を350°回転通常翻訳なし）？ここで

は、いくつかの例でCodePenです： http://codepen.io/jbjw/pen/gmyajY

Answer 1

あなたがrotate(0)の開始点を指定しない場合は、期待どおりにアニメーション化します。

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    animation: rotate 3s linear infinite; 
 
} 
 

 
@keyframes rotate { 
 
    100% { 
 
    transform: translate(500px) rotate(350deg); 
 
    } 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div></div>

また、あなたのtranslate(0)開始点を指定することができますし、期待どおりに動作します。

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    animation: rotate 3s linear infinite; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: translate(0) rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: translate(500px) rotate(350deg); 
 
    } 
 
} 
 

 

 

 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div></div>

Answer 2

私の最高の推測では、それが0％で、あなたは0度であることを認識していることです。 100％で、あなたは350度です。これは実際に始まった場所からわずか10°です。最初から10°回転するだけです。あなたは、変換の半分の値を50％に追加し、両方を取ることによってこの問題を解決することができます http://codepen.io/anon/pen/PpgNje

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    50% { 
    transform: translate(250px) rotate(175deg) 
    } 
    100% { 
    /* transform: rotate(350deg); */ 
    transform: translate(500px) rotate(350deg); 
    } 
}