how to avoid break between different steps of keyframe animation? - css

Question

I would like my animation to not stop at 50%, how to avoid this short iterruption?
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(2);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play {
-webkit-animation-name: PLAY;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-out;
}

Answer 1

I think right now it's using ease-in-out, or something similar, for its "timing function".
Try adding this CSS property:
-webkit-animation-timing-function: linear;
2ND EDIT: So now that I see your class declaration it seems the easing is intentional. Since that applies to each phase of the animation though, it needs to be applied a little differently. Here's my full change - you might as well remove the timing function inside of the class:
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
-webkit-animation-timing-function: ease-in;
}
50% {
-webkit-transform: rotate(-1080deg) scale(2);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: rotate(-2060deg) scale(1);
}
}
1ST EDIT: Actually, having admired your "Meanwhile, at the batcave...!" animation in my test page for a moment, I think there's a bit more to improve. I'm guessing that the translation is meant to offset the off-center spinning caused by the default "center point" position. So, you can add this CSS property, and remove the translations. Then it's not even dependent on image size.
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
In fact, the 0% can just be "-webkit-transform: none"
Changed to use the correct cross-browser CSS property