css animation rotate and translate doesn't work together [duplicate]

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;
  }
}

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

来源：https://stackoverflow.com/questions/36455370/css-animation-rotate-and-translate-doesnt-work-together

标签

html