3

I am trying to run a certain part of a CSS3 animation in reverse order after it runs forwards.

The part I am trying to get is the keyframes from 50% to 100% to go in reverse after they have gone forwards.

I have 5 animations that go in the order fallA, fallB, fallC, fallD, and fallE then after fallE is done, I need it to go fallE, fallD, fallC, fallB, and fallA; but, only to the 50% keyframe from the 100% it is at.

Is there a way I can do this with CSS or even javascript / jquery?

Here is the animation code:

    .animated.fallA{
        -moz-animation: fallA 1s forwards ease-in-out;
        -webkit-animation: fallA 1s forwards ease-in-out;
        animation: fallA 1s forwards ease-in-out;
    }
    .animated.fallB{
        -moz-animation: fallB 1.2s forwards ease-in-out;
        -webkit-animation: fallB 1.2s forwards ease-in-out;
        animation: fallB 1.2s forwards ease-in-out;
    }
    .animated.fallC{
        -moz-animation: fallC 1.4s forwards ease-in-out;
        -webkit-animation: fallC 1.4s forwards ease-in-out;
        animation: fallC 1.4s fowards ease-in-out;
    }
    .animated.fallD{
        -moz-animation: fallD 1.6s forwards ease-in-out;
        -webkit-animation: fallD 1.6s forwards ease-in-out;
        animation: fallD 1.6s forwards ease-in-out;
    }
    .animated.fallE{
        -moz-animation: fallE 1.8s forwards ease-in-out;
        -webkit-animation: fallE 1.8s forwards ease-in-out;
        animation: fallE 1.8s forwards ease-in-out;
    }
    @-moz-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-moz-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-moz-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-webkit-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-moz-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }       
    }
    @-moz-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
4

4 回答 4

2

have you tried with this? 

.foo{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}

here is the mozilla dev network reference
and here the W3C reference

于 2013-04-11T17:32:15.690 回答
2

Have a look at cubic-bezier as an easing function, in stead of the ease-in-out. http://cubic-bezier.com

You would have to make your animation go to your current 50% mark, and by using the correct bezier, you make make it 'overshoot' and move back. Something like this: http://cubic-bezier.com/#.29,.61,.79,3

edit:
I did not look at your animation code carefull enough it seems. Bezier is not what you are after, as you are trying to create a bounce effect, and not an elastic 'overshoot' effect (if I understand your code correctly) http://jsfiddle.net/4KwY8/1/

The solution is not that hard. You just need to define your keyframes a bit diiferently for your fallB, C and D. The css would look something like this:

@keyframes fallB{
    0%{
        position:relative;
        opacity:0.0;
        top:-100px;
    }
    33%, 100%{
        opacity:1.0;
        top:0;
    }
    66%{
        top:-20px;
    }
}

As you can see I use the middle keyframe both for the 1/3 point and the 3/3 point. The fiddle with this change included looks like this: http://jsfiddle.net/4KwY8/2/

I think this is what you where after. You might have to do some finetuning in terms of timing and keyframe positioning, but I think you get the general idea. If it is not clear, feel free to ask.

PS: For inspiration, some more cool css animation effects can be found here: http://daneden.me/animate/

于 2013-04-11T17:33:51.190 回答
2

Rather than trying to hand code your animation, and working round all the limitations of CSS 3 transitions, I'd recommend you do yourself a big favour and use one of the various JavaScript tween libraries such as the Greensock animation platform (GSAP).

It's incredibly powerful, with support for delays, staggers, repeats, loops, reverse etc. You could probably rewrite the above (plus the additional functionality you need) in a few lines with GSAP.

You can see how it stacks up against CSS 3 transitions here.

于 2013-04-11T17:36:30.233 回答
0

You could write another keyframe animation in reverse (or using direction reverse) that has your needed animation from 0% to 100% and runs in half the time. So when the animation ends you could use jQuery to bind to the animation end and add a class that would apply the 'reverse' animation.

于 2013-04-11T17:49:26.557 回答