la animación css gira y la traducción no funciona en conjunto

Estoy probando la animación css usando @keyframes, sin embargo las propiedades css Transform rotar y translate no funcionan juntas.

Por favor asesorar sobre lo que ha ido mal aquí. ¡¡Gracias!!

Puede verificar el código en el codepen: http://codepen.io/anon/pen/XdzwZB

siguiente es mi código de @keyframes:

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

La forma correcta de aplicar transforms múltiples es simplemente colocarlos todos en una propiedad de transform , con cada transformación separada por un espacio:

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

Códepen actualizado