W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Reversing certain part of animation

From: irfan mir <theirf@gmail.com>
Date: Thu, 11 Apr 2013 13:15:07 -0400
Message-ID: <CAMPj_RryB4h1E5Dy0JqpdsrSoyJ6HSh7rDOqC4LS+RD=WtbAPg@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
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

This archive was generated by hypermail 2.3.1 : Thursday, 11 April 2013 17:15:35 UTC