CSS-Animation drehen und übersetzen funktioniert nicht zusammen

Question

Ich probiere die CSS-Animation mit @keyframes, aber die CSS-Transformation drehen und übersetzen Eigenschaften arbeiten nicht zusammen.

Bitte geben Sie an, was hier falsch gelaufen ist. Vielen Dank!!

Sie können den Code auf codepen überprüfen: http://codepen.io/anon/pen/XdzwZB

folgende ist mein @keyframes Code:

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

Answer 1

Der richtige Weg, um mehr anzuwenden transforms einfach ist, sie zu platzieren alle in einer transform Eigenschaft,

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

: mit jeweils durch einen Zwischenraum getrennt Transformierte