CSS3 Animation Not Playing Consistently

I've got a simple CSS animation that looks like the following:

 @-webkit-keyframes 'move-domo' {
  0%   { bottom: 0px; left: 24px; }
  5%   { bottom: 5px; }
  10%  { bottom: 0px; }
  15%  { 开发者_StackOverflowbottom: 5px; }
  20%  { bottom: 0px; }
  25%  { bottom: 5px; }
  30%  { bottom: 0px; }
  35%  { bottom: 5px; }
  40%  { bottom: 0px; }
  45%  { bottom: 5px; }
  50%  { bottom: 0px; left: 300px; }
  55%  { bottom: 5px; }
  60%  { bottom: 0px; }
  65%  { bottom: 5px; }
  70%  { bottom: 0px; }
  75%  { bottom: 5px; }
  80%  { bottom: 0px; }
  85%  { bottom: 5px; }
  90%  { bottom: 0px; }
  95%  { bottom: 5px; }
  100% { bottom: 0px; left: 24px; }
 }

In Chrome, it works the way I would expect it to, however in Safari, it does not play the way I would expect—it plays all the "bottom" animations first, then rushes through the "left" animations at the end.

You can see the behavior at http://kylehayes.me

Safari is the correct behavior. When an animation keyframe doesn't specify a value, it should use the value on the base object. Chrome interpolates missing keyframe values.

This animation is correctly keeping the image at its original position, then moving it to 300px at 15 seconds (50% of the total animation you specified in your animation - I looked at your source). Then moving it back to the original position at the next keyframe.

You can fix this by specifying appropriate intermediate values of left in each keyframe, or by putting your horizontal animation in a wrapper div around the vertical one.

Try to use the "-webkit-transform: translate" instead of the top,bottom,left,right attributes.