Path: csiph.com!weretis.net!feeder7.news.weretis.net!news.unit0.net!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: Tue, 12 Nov 2019 12:00:46 +0100 Lines: 28 Message-ID: References: <54ce4120-6481-4ad8-9e1a-2fe545d32705@googlegroups.com> Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 7bit X-Trace: individual.net C0IGPE4/BoIdOdtGewLYpA1jg7fLXj78fRaoVVxkRdSu3+pG9g Cancel-Lock: sha1:H2nBLf/BOw7GhL26SEfcMlpQsbc= In-Reply-To: Content-Language: en-US Xref: csiph.com comp.lang.javascript:37754 On 10.11.19 01:05, Arno Welzel wrote: > Arno Welzel: > >> groovee@cyberdude.com: >> >>> OK, so say I have a green box on my screen which I want to start off >>> at the top left, move to the top right and THEN from there to the >>> bottom right. How do I do this? (this is just an example). >> You don't need JavaScript, you can just define an animation which does >> multiple changes in sequence. However you can use an event listener to >> do something at the end of one animation as well: >> >> For example: > > And here with change the CSS class at the end of the first animation so > a second animation will start then: > > JFTR: I updated the example to do three animations one after another and also change the text in the box after each animation. The CodePen for this was also updated: -- Arno Welzel https://arnowelzel.de