There seems to be a strange issue in Chrome with the animation I created. It moves to the left first before reaching the intended position.
The animation should only move to the right and top directions.
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 watch the animation here: http://jsfiddle.net/hutber/fejpm491/1/