Quote generator with css animation trigger issue (and presumably a lot more)

Hi there,
It’s the first time that I write on this forum and I would like to thank everyone that is part of this community.
Seriously, I don’t know anyone but I already have solved thousands of question through only what was previously been asked!

However. I am facing the intermediate front-end projects. I just finished the random quote machine. I made a function in js that trigger a css animation every time that the reload button is clicked.
This animation has a strange behaviour because sometimes loads fine, sometimes not. I think this is happening because I made only one function that is triggered when the reload button is clicked. So the duration of the animation is dependend by the duration of the function.
I am asking if there is a way of making this animation to behave correctly leaving it in the same function. Or is it better making a new function?

By the way what do you guys think about this project?

this is the codepen link: https://codepen.io/lucagez/pen/gXVpMb

Hope that someone can show me another way of trigger the animation.

Thanks in advance for your precious help!

p.s. and sorry in advance for my messy code :sweat_smile: