Geek asks and answers

Change position / target values ​​of webkit css transition without stopping it?

Is it possible to change the target position or attributes of a transition that works without stopping it so that it looks like a smooth transition?

Let me explain an example, let's say my initial animation is as follows:

-webkit-transition:-webkit-transform 5s ease-in-out
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);

I installed this using javascript that if before this transition reaches its end, I want to change translate3d or rotate to new values, but I don't want to stop the transition, I want it to smoothly transition to these new values ​​without skewing the crawl transition. If I set new values ​​using javascript, it stops first and then starts the transition to these new values, this is undesirable for me.

Is it possible? Or there is another way to discuss this, I don’t want to use javascript for animation, changing properties like top / left. I prefer css animation.

thank

+3
source share
1 answer

I think the best and most regulated way is to make the transition with JS. Let JS change the transform. JS knows how far it is in the transition process, and you can set up a "path" to place a new target position. You can even implement Bezier curves for smooth curves in case the direction is different.

This, however, is a lot more work.

0
source

More articles:


All Articles