css animasyonu döndürme ve çeviri birlikte çalışmıyor

Question

@keyframes kullanarak css animasyonu deniyorum, ancak css Transform döndürme ve çeviri özellikleri birlikte çalışmıyor.

Lütfen nelerin yanlış gittiğini burada bildirin. Teşekkürler!! Benim @keyframes kodu aşağıdadır http://codepen.io/anon/pen/XdzwZB

:

Sen codepen kod kontrol edebilirsiniz

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

Answer 1

birden transforms basitçe bir transform özelliğinde hepsini yerleştirmektir uygulamak için doğru yolu, Bir boşlukla ayrılan her dönüşümü ile:

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