Animations not working properly on elements with css transition applied
See original GitHub issueSetting for example transition: all .35s ease
on an element and then trying to animate it with anime.js results in very weirdly behaving animations.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
CSS3 Transition not working - Stack Overflow
A general answer for a general question... Transitions can't animate properties that are auto. If you have a transition not working, ...
Read more >CSS Animations Not Working? Try These Fixes - HubSpot Blog
Learn how to fix common CSS animation error and get your animations looking how you want them.
Read more >Using CSS transitions - CSS: Cascading Style Sheets | MDN
CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), ...
Read more >ANIMATE CSS NOT WORKING !!! Fix Animate CSS ... - YouTube
I have linked animate CSS with it and applied relevant CSS animation classes to elements that are needed. Even when I am doing...
Read more >An Interactive Guide to CSS Transitions - Josh W Comeau
For example: let's say that we're moving an element from left to right, over a 1-second duration. A smooth animation should run at...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 ofall
.However, if you must use
all
, then removing thetransition
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.Awesome, thank you!