Css animation doesn't work with transform

Question

For some reason in Chrome the animation I have created will move to the left first, then move to the desired position.

It should only be moving to the right and top.

Css

.intro .cogFade .cog {
    position: absolute;
}

.cog.large {
     animation-name: cog-large;
 }

@-webkit-keyframes cog-large {
  100% {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%) scale(1, 1);
  } 
}

Html

<div class="intro">
        <div class="cogFade">
            <div class="cogElements" style="margin-top: 194px;">
                 <div class="circle zoomout" style="margin-top: 194px;"></div>
                 <div style="font-size: 5rem;" class="cog large">
                     <i class="icon-cog spinning"></i>
                 </div>
            </div>
        </div>
        <div style="font-size: 15rem; display: none;" class="b breathing">
              <i class="icon-dotb"></i>
        </div>
 </div>

Please see the animation in action here: http://jsfiddle.net/hutber/fejpm491/1/

Answer 1

I put your posted code into a JSFiddle, as the one linked by you was way too big to work with.

First off, the -webkit- prefix isn't needed anymore for animations in Chrome.

Your problem is that there are no proper initial values for position , left and top , leading to an in fact no completely defined animation. As you may have noticed, browsers behave differently in that case, as the animation looked different in Chrome and Firefox.

Just make sure that position: absolute is always true independently of the animation, then set proper start and end values for left and top .

Example based on your code