変換の順序が同じでない場合、アニメーション内で回転することはアニメーション化されません。なぜですか？ここ

Question

はデモです：

@keyframes test1{ 
    0% { 
     transform: rotate(0) scale(1, 1) translate(0,0) 
    } 
    100% { 
     transform: scale(2, 2) rotate(180deg) translate(200px,200px) 
    } 
} 

私はキーフレームを変更するとき：

@keyframes test1{ 
    0% { 
     transform: rotate(0) scale(1, 1) translate(0,0) 
    } 
    100% { 
     transform: rotate(360deg) scale(2, 2) translate(200px,200px) 
    } 
} 

それは再び回転キーフレームがあるときhttp://codepen.io/anon/pen/WGLGyY

DIVは回転しません。

ここに理由は何ですか？

私は順序が変換に影響する可能性があることを知っています。

おそらくrotate（360deg）がrotate（0）と等しいためです。しかし、私は変換の順序を変更すると、再び元に戻ります。

Answer 1

最初のキーフレームにtransform: noneを使用すると、回転します。

ここではアクションである：

@keyframes test1{ 
 
\t 0% { 
 
\t \t transform: none; 
 
\t } 
 
\t 100% { 
 
\t \t transform: scale(2, 2) rotate(360deg) translate(200px,200px) 
 
\t } 
 
} 
 

 
#test{ 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    animation: test1 3s infinite 
 
}

<div id="test"></div>