css animation rotate and translate doesn't wor

Question

This question already has an answer here:

• How to apply multiple transforms in CSS? 9 answers

I'm trying out the css animation using @keyframes, however the css Transform rotate and translate properties aren't working together.

Please advise on what has gone wrong here. Thanks!!

You can check the code on codepen: http://codepen.io/anon/pen/XdzwZB

following is my @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

The correct way to apply multiple transforms is to simply place them all in one transform property, with each transform separated by a space:

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

Updated codepen