Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animations not working properly on elements with css transition applied

See original GitHub issue

Setting for example transition: all .35s ease on an element and then trying to animate it with anime.js results in very weirdly behaving animations.

Example: https://codepen.io/elias-g/pen/PeMjVw

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

alexchantasticcommented, Jun 2, 2018

Depending on what transitions and animations you want to achieve, the easy way would be to only have transition target the individual properties that you want to transition instead of all.

However, if you must use all, then removing the transition from the element and then adding it back after the animation has completed would be a good starting point. Something like this: https://codepen.io/alexchantastic/pen/zavXzq/

The issue with the example though is if you are transitioning and animating on the same property. In this case, you would need to re-declare the :hover transition with the end result of your animation.

0reactions

eliasghorwallcommented, Jun 4, 2018

Awesome, thank you!