Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

how to avoid break between different steps of keyframe animation?

how to avoid break between different steps of keyframe animation?

Problem

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;
}
Problem courtesy of: Ludo

Solution

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

Solution courtesy of: Katana314

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

how to avoid break between different steps of keyframe animation?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×