Animation Stopping In Process - css-animations

Question

** Sorry about previous post. It submitted before I was done and I couldn't edit it. *
I have an image that has two animations. It will first zoom in and then rotate. It works except for when the rotation starts, it jumps to the end in the process. I am new to coding so it probably is an oversight on my part but I would love some help. Code below as well as a fiddle.
HTML
<div class="pageLoad">
<img id ="ox-logo" src="http://demo.alphaomegawebservices.net/weboxsmiles/wp-content/uploads/2014/11/weboxsmiles-logo-600.png">
</div>
CSS
#ox-logo {
position: absolute;
max-width: 50%;
margin-left: 150px;
top: 5%;
z-index: 20;
animation: zoomLogo 3s ease-in 1s, rotateLogo 4s ease-in 1s forwards;
transition: 3s ease-in;
transform-origin: 50% 50%;
-webkit-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
-webkit-transition: 6s ease-in;
-webkit-transform-origin: 50% 50%;
-moz-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
-moz-transition: 3s ease-in;
-moz-transform-origin: 50% 50%;
-o-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
-o-transition: 3s ease-in;
-o-transform-origin: 50% 50%;
-ms-animation: zoomLogo 3s ease-in 1s, rotateLogo 6s ease-in 1s forwards;
-ms-transition: 3s ease-in;
-ms-transform-origin: 50% 50%;
}
#keyframes rotateLogo {
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}
#-webkit-keyframes rotateLogo {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}
#-moz-keyframes rotateLogo {
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}
#-o-keyframes rotateLogo {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}
#-ms-keyframes rotateLogo {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}
#keyframes zoomLogo {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
}
}
#-webkit-keyframes zoomLogo {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
}
}
#-moz-keyframes zoomLogo {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
}
}
#-o-keyframes zoomLogo {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
}
}
#-ms-keyframes zoomLogo {
0% {
opacity: 0;
-ms-transform: scale(.3);
}
50% {
opacity: 1;
}
}
FIDDLE
http://jsfiddle.net/SRVIVR/stgb3fdL/51/

Answer 1

Use a single animation instead. Here's a jsfiddle that has only webkit-specific code:
http://jsfiddle.net/stgb3fdL/56/
Code:
#-webkit-keyframes zoomAndRotate {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
}
51% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: scale(.2) translate(249px,150px) rotate(-720deg);
}
}