Reversing certain part of animation

Hello,
I was wondering if it is possible to reverse only a certain part of an
animation after the animation had happened in the forward direction?

I have a 5 animation ( fallA, fallB, fallC, fallD, and fallE ).

I need the keyframes from 50% to 100% to run in reverse, as if from 100% to
50% after it runs forward for the first time.
But in the order so that fallD goes first, then fallC, then fallB, and then
fallA.

Is there a way to do this? I hope you don't mind me asking for help.

Here is my code so far:

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

I would greatly appreciate any and all help with this.

Thanks in Advance & Best Regards,
Irfan.

Received on Thursday, 11 April 2013 17:15:35 UTC