current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

Eg, this is my code:

@-webkit-keyframes anim {
    0%   {
        -webkit-transform: translate(-100px,0px) rotate(5deg);
    }
    50%   {
        -webkit-transform: translate(-140px,-5px) rotate(10deg);
    }
    100%   {
        -webkit-transform: translate(200px,-30px) rotate(40deg);
    }
}

How can I tell exactly when it's at 50%? I know I can detect when it ends but that doesn't help here.

Now... I could try to base it on time since the animation runs for 3 seconds, but that seems dodgy.

Thanks

share|improve this question

1 Answer 1

up vote 0 down vote accepted

I don't think there are notification events for the middle stages of a single animation.

As a workaround, you could chain two separate animations (start the second animation when the first one ends using JS) and use the event at the end of the first one to know when the middle of the whole sequence was reached.

Here's an article on a work-around:

CSS Animation Keyframe Events (Javascript solution)

share|improve this answer
    
I guess that's as good as it's going to get for me, but it'll be pretty annoying having to set that up. The real animation is in 11 parts, so that'll mean 11 different durations that I'll have to first make and then chain together :( –  Phill Jun 14 '13 at 4:01
    
@Phil, you can probably create one table of data for each successive animation, one index into the table and a common event handler to do all the work for you. –  jfriend00 Jun 14 '13 at 4:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.