Path: csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail From: Arno Welzel Newsgroups: comp.lang.javascript Subject: Re: Two SUCESSIVE animations on the same element - how? Date: Sun, 10 Nov 2019 01:11:44 +0100 Lines: 30 Message-ID: References: <54ce4120-6481-4ad8-9e1a-2fe545d32705@googlegroups.com> <5ec0371e-4b87-4da7-b277-e501694ccda2@googlegroups.com> <1f2648d1-bb16-4d9e-a653-16a5089051d4@googlegroups.com> Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 7bit X-Trace: individual.net QeLKjo/R1A9RxDDkdNV9egbqsIKu1sT1fsQuphL2cHBc/DJKIW Cancel-Lock: sha1:dqCViKyHubCtj13Pl15+7OvviT4= In-Reply-To: <1f2648d1-bb16-4d9e-a653-16a5089051d4@googlegroups.com> Xref: csiph.com comp.lang.javascript:37741 groovee@cyberdude.com: > On Wednesday, 6 November 2019 16:18:05 UTC+5:30, Evertjan. wrote: > >> Just give the second class it's own starting coordinates. >> > > > As I said, this is just an example - there could be MANY situations > where I need to know how to pull off this kind of thing where "giving > the second class it's own starting coordinates" will Not Be An > Option. In any case, that's not the point - why WILL what I posted > not work? 1) You just set the class "goright" and then immediately afterwards to "godown" - but you have to wait until the first animation is finished before you change the class. This can be done by adding an event listener for the 'animationend' and checking which class is currently set. 2) The animations don't run only once, because you did not specify "animation-fill-mode: forwards;" in the CSS class. My example for this: https://arnowelzel.de/samples/animation2.html -- Arno Welzel https://arnowelzel.de