5

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;
  }
}
Bmax
  • 590
  • 4
  • 11
  • 24
  • Combine the transforms into a single property. CSS declarations are not additive. The latest overrides the former. – Harry Apr 06 '16 at 15:20

1 Answers1

10

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

Jacob G
  • 13,762
  • 3
  • 47
  • 67