How to make a gradient border button with animation?

Question

css

There is a button, you need to make a gradient border from its two corners, when hovering, the stroke should become solid. I did it this way -
But there are two problems (both are visible on the gif) -

1. In chrome, the animation is jerky
   
2. For some reason, the bottom border is not always displayed
   

How can they be fixed, or perhaps there is some more correct way to implement a similar effect?

Answer 1