cssアニメーションrotateとtranslateが一緒に機能しない

Question

@ssystemを使用してCSSアニメーションを試していますが、CSSのTransform rotateプロパティとtranslateプロパティは連携していません。

ここで間違っていることをお伝えください。ありがとう!!

あなたはcodepen上のコードを確認することができます。 http://codepen.io/anon/pen/XdzwZB

次は私の@keyframesコードです：

@keyframes slideIn { 
    0%, 100% { 
    transform: translate(10px); 
    transform: rotate(0deg); 
    color: red; 
    } 
    25% { 
    transform: translate(125px); 
    transform: rotate(360deg); 
    color: green; 
    } 
} 

Answer 1

複数transformsを適用するための正しい方法は、単に1つのtransformプロパティでそれらすべてを配置することです、各変換はスペースで区切られます。

@keyframes slideIn { 
    0%, 100% { 
    transform: translate(10px) rotate(0deg); 
    color: red; 
    } 
    25% { 
    transform: translate(125px) rotate(360deg); 
    color: green; 
    } 
} 

Updated codepen