2

So bacically I made some elements, animated them with CSS and added some functionalities with JS. Here's a jsfiddle version of it:

https://jsfiddle.net/weeznismen/4frt72s3/

Right now I'm struggling with slowing down the animation when user hovers over inner circle or a displayed text. Right now, the CSS property

animation-duration

changes on hover to larger number so it slows down and when cursor leaves it, it changes back to original, to speed up again. The problem is it's snappy and I'm trying to achieve a smooth transition from slowed down animation to sped up and vice versa. Any ideas?

Improve this question
3
  • changing animation-duration will not work like you think, explanation here: stackoverflow.com/a/56328589/8620333 Commented Jul 10, 2019 at 8:42
  • 2
    I would really advise you to use the great library called Greensock. Even if a fix would be offered here , I highly doubt that it would work cross browser , as each browser has its own rendering engine. Commented Jul 10, 2019 at 9:00
  • Not possible (to do this smoothly if the animation is mid-way), you will have to Javascript this. Commented Jul 10, 2019 at 9:32
Related questions
3
Make animation slower (jQuery)
7
Set CSS animation delay with javascript
0
Speed up javascript animation by specifying the point of time when css rules should apply
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.