1

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?

unesic
  • 43
  • 7
  • changing animation-duration will not work like you think, explanation here: https://stackoverflow.com/a/56328589/8620333 – Temani Afif Jul 10 '19 at 08: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. – Idan Beker Jul 10 '19 at 09:00
  • Not possible (to do this smoothly if the animation is mid-way), you will have to Javascript this. – Marcus Cemes Jul 10 '19 at 09:32

0 Answers0