Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #37689
| Newsgroups | comp.lang.javascript |
|---|---|
| Date | 2019-11-04 13:07 -0800 |
| References | <54ce4120-6481-4ad8-9e1a-2fe545d32705@googlegroups.com> |
| Message-ID | <fe7f0741-df0b-495e-9e50-d8eab2d6bebb@googlegroups.com> (permalink) |
| Subject | Re: Two SUCESSIVE animations on the same element - how? |
| From | "Michael Haufe (TNO)" <tno@thenewobjective.com> |
On Monday, November 4, 2019 at 1:18:00 AM UTC-6, gro...@cyberdude.com wrote:
> 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).
>
> I have a .goright class with a
>
> {
> animation-name: goright;
> blah blah
>
> and then a
>
> @keyframes goright {
> from {
> transform: blah
> }
> to {
> transform: blah
> }
> }
>
>
>
> And then, I thought I'd put in ANOTHER:
>
> .godown {
> animation-name: godown;
> blah
> }
>
>
> @keyframes godown {
> from {
> transform: blah
> }
> to {
> transform: blah
> }
> }
>
>
>
>
> And then put in this in my JS code:
>
>
> greenbox.className = "goright";
> greenbox.className = "godown" ;
>
>
>
> But this is not working! - The box will go to the right and then JUMP BACK TO WHERE IT CAME FROM! Why??!! What am I supposed to do now??
>
>
> Thanks for your help.
You should use `animation-fill-mode: forwards;`
Ref:
<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>
Example:
<https://codepen.io/mlhaufe/pen/MWWQBgx>
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-03 23:17 -0800
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-04 13:07 -0800
Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-06 01:53 -0800
Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-06 11:47 +0100
Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-07 09:07 -0800
Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-08 00:25 +0100
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:11 +0100
Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-11 14:19 +0100
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 11:00 -0800
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-07 16:46 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 22:57 -0800
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 04:21 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-08 09:08 -0800
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 10:34 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 01:44 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 02:02 -0800
Re: Two SUCESSIVE animations on the same element - how? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-11-09 11:55 +0000
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:39 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:32 -0800
Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-09 05:01 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:45 -0800
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:12 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 13:53 -0800
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:55 +0100
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 19:00 -0800
Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 21:09 -0800
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:10 +0100
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:29 +0100
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:35 +0100
Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:10 -0800
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:51 +0100
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:05 +0100
Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-12 12:00 +0100
csiph-web