Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37790

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

Show all headers | View raw

Arno Welzel:

> 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.

Here another CodePen with size changes:

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



-- 
Arno Welzel
https://arnowelzel.de

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

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