Re: Reversing certain part of animation

Thank you, it does have some bugs. I think I'm going to try Tab's solution
with a second animation.
Thank you for teaching me this however!


On 11 April 2013 14:03, Mircea Piturca <mircea@typefolly.com> wrote:

> I think that Firefox doped the prefix.
> You can also try this one: http://jsfiddle.net/XvjDy/2/
>
> There are few changes from Moz and Webkit implementation, so expect bugs...
>
> Thank you,
> Mircea Piturca
> www.typefolly.com
>
>
> ----- Original Message -----
> From:
> "irfan mir" <theirf@gmail.com>
>
> To:
> "Mircea Piturca" <mircea@typefolly.com>
> Cc:
>
> Sent:
> Thu, 11 Apr 2013 13:54:24 -0400
> Subject:
> Re: Reversing certain part of animation
>
>
>
> I think direction: alternate; and animation-iteration: count: 1.5;
>
> Do chrome or Firefox implement them with vendor prefixes or a different
> syntax?
>
> Thanks for the fiddles. I'll take a look at them in depth later.
>
> But for the first one, it looks like the reverse animation runs in full
> And not half.
>
> Thanks for the help!
> On Apr 11, 2013 1:48 PM, "Mircea Piturca" <mircea@typefolly.com> wrote:
>
>> Hi,
>> Not really sure if I understood exactly what you need but I'll try to
>> help.
>>
>> Theoretically this should be possible using animation-direction:
>> alternate-reverse and animation-iteration-count:  1.5. This should run on
>> the first iteration forward and then reverse for .5% of the iteration.
>> Unfortunately this is not implemented according to the standards neither by
>> Firefox or Chrome: http://jsfiddle.net/XvjDy/
>>
>> You can still bind 2 animations together and get this effect:
>> http://jsfiddle.net/MCLS3/. I've fiddled with the original values.
>>
>> Hope it helps,
>> Have fun!
>>
>>
>> Mircea Piturca
>> www.typefolly.com
>>
>>
>> ----- Original Message -----
>> From:
>> "irfan mir" <theirf@gmail.com>
>>
>> To:
>> "www-style@w3.org" <www-style@w3.org>
>> Cc:
>>
>> Sent:
>> Thu, 11 Apr 2013 13:15:07 -0400
>> Subject:
>> 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 18s 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:10;
>>  top:0;
>> }
>> 100%{
>>  top:0;
>> }
>> }
>>
>> I would greatly appreciate any and all help with this.
>>
>> Thanks in Advance & Best Regards,
>> Irfan.
>>
>>


-- 
Regards,
              Irfan Mir.