Re: Two SUCESSIVE animations on the same element - part 2

Path	csiph.com!weretis.net!feeder6.news.weretis.net!feeder7.news.weretis.net!news-peer.in.tum.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From	Arno Welzel <usenet@arnowelzel.de>
Newsgroups	comp.lang.javascript
Subject	Re: Two SUCESSIVE animations on the same element - part 2
Date	Fri, 15 Nov 2019 17:34:29 +0100
Lines	37
Message-ID	<h382cnFihmsU1@mid.individual.net> (permalink)
References	<be5a50a7-6a9a-49d5-b9b6-dce2926614d7@googlegroups.com>
Mime-Version	1.0
Content-Type	text/plain; charset=utf-8
Content-Transfer-Encoding	7bit
X-Trace	individual.net DiiC7R7Gir+97DaN1lINpwDr15bhguxpdhxDYKu7/74CBAgLFn
Cancel-Lock	sha1:6NkGvoLlZyxTw7IVxwZtOQHQxb4=
In-Reply-To	<be5a50a7-6a9a-49d5-b9b6-dce2926614d7@googlegroups.com>
Xref	csiph.com comp.lang.javascript:37789

Show key headers only | View raw

groovee@cyberdude.com:

> Hi, Thanks to everyone who posted in my last thread, I decided to
> open a new one. I learnt new things from that one, so thanks muchly
> to all who posted.
> 
> THIS time, my question is: suppose I have a box which I want to SCALE
> down in size, say to 50% of it's size, and then move the SCALED box
> around the screen, say move it down - how do I do it?? :) If I use

By reading the documentation.

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>

Especially this:

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode>

> the "animationend" property as Arno suggested last time, I don't
> think it will work - the box will scale down and then suddenly snap
> BACK to it's original size and *then* move down. So...how do I pull
> of what I want?

When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
How often do I have to repeat this, before you understand it?

Please have a look at the example I already mentioned - this should
answer ALL questions:

<https://codepen.io/arnowelzel/pen/yLLqLyz>

And yes, it does not matter if you change the position or size of a box,
the principle is always the same.

-- 
Arno Welzel
https://arnowelzel.de

Thread

Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-14 10:52 -0800
  Re: Two SUCESSIVE animations on the same element - part 2 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-15 09:40 +0100
  Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-15 17:34 +0100
    Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-15 17:42 +0100
    Re: Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-16 02:44 -0800
      Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-16 18:18 +0100
        Re: Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-21 02:00 -0800

csiph-web