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

Path	csiph.com!weretis.net!feeder6.news.weretis.net!feeder7.news.weretis.net!news.unit0.net!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	Sat, 16 Nov 2019 18:18:48 +0100
Lines	55
Message-ID	<h3apboF58bhU1@mid.individual.net> (permalink)
References	<be5a50a7-6a9a-49d5-b9b6-dce2926614d7@googlegroups.com> <h382cnFihmsU1@mid.individual.net> <55d47fbb-7c02-4199-a6f3-88774e6e59ad@googlegroups.com>
Mime-Version	1.0
Content-Type	text/plain; charset=utf-8
Content-Transfer-Encoding	7bit
X-Trace	individual.net Z6PMzic3dxVRy1S/4n2MqQTQ2hyr5d8cMi1QsBOTLd6Sgy3yEv
Cancel-Lock	sha1:jcTgjLPC+y7sSThHZ0gBXafrhYM=
In-Reply-To	<55d47fbb-7c02-4199-a6f3-88774e6e59ad@googlegroups.com>
Xref	csiph.com comp.lang.javascript:37799

Show key headers only | View raw

groovee@cyberdude.com:

> On Friday, 15 November 2019 22:04:40 UTC+5:30, Arno Welzel  wrote:
> 
>> When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
>> How often do I have to repeat this, before you understand it?
> 
> Yes I bloody READ it! (and DID it!)

But it seems you didn't understand the idea behind that.

> Perhaps you could tell me where I'm going wrong then? :
> 
> 
> I've got a box which I want to "go back" and start spinning around. I've got this:
[...]

Can you provide a complete example of what you did and not just code
snippets? Thank you.

So far I assembled your example to this:

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

Problem 1:

The class ".goback" has "animation-fill-mode: forwards;" but not
".spinclass". So ".spinclass" will repeat itself all the time. But
probably this is what you want anyway.

Problem 2:

The class ".goback" uses the following "to" transformation:

  transform: perspective(200px) translateZ(-200px);

However ".spinclass" starts with this:

  transform: perspective(0px) translateZ(-200px) rotate3d(1,0,0,0deg);

So ".spinclass" will reset the box to its initial perspective of 0px
instead of 200px.

The correct version would be this:

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

Next time please take your time and try to think a bit more logical. If
animations should follow one after another, they have to fit to each
other as well.

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