Keyframe animation works in Safari not in Chrome

Question

In Chrome, I can run this this animation just fine:

.card {
    height: 100px;
    width: 100px;
    background: red;
}
.cardSway {
  -webkit-animation: cardSway 1s ease-in-out infinite;
  -moz-animation: cardSway 1s ease-in-out infinite;
  -o-animation: cardSway 1s ease-in-out infinite;
}
@-webkit-keyframes cardSway {
  0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
  50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
  100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
@-moz-keyframes cardSway {
  0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
  50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
  100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
@-o-keyframes cardSway {
  0% {-o-transform: rotate(1deg) translate(-1px,0px);}
  50% {-o-transform: rotate(-1deg) translate(1px,0px);}
  100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}

But this animation doesn't work:

.card {
    height: 100px;
    width: 100px;
    background: red;
}
.cardSway {
  -webkit-animation: cardSway 1s ease-in-out infinite;
  -moz-animation: cardSway 1s ease-in-out infinite;
  -o-animation: cardSway 1s ease-in-out infinite;
   animation: cardSway 1s ease-in-out infinite;
}
@-webkit-keyframes cardSway {
  0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
  50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
  100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
@-moz-keyframes cardSway {
  0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
  50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
  100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
@-o-keyframes cardSway {
  0% {-o-transform: rotate(1deg) translate(-1px,0px);}
  50% {-o-transform: rotate(-1deg) translate(1px,0px);}
  100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}
@keyframes cardSway {
  0% {transform: rotate(1deg) translate(-1px,0px);}
  50% {transform: rotate(-1deg) translate(1px,0px);}
  100% {transform: rotate(1deg) translate(-1px,0px);}
}

The only difference I can find is the presence of the generic keyframe selector is messing with the -webkit- prefixed code. Other Chrome users say it's working fine for them, so I thought it was a busted install. I've reinstalled and it's still a problem for me. Any ideas?

EDIT Found the answer to my problem in this thread: https://code.google.com/p/chromium/issues/detail?id=331261

'Enable experimental Web Platform features' in chrome://flags caused the prefixing conflict. Disabling it fixed my problem. :)