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