How to animate svg?

Question

css

The project has one component, which is made on svg, a complex mask. And now I need this mask to follow the cursor horizontally. I just managed to change the coordinates, but it looks terrible. The only solution is to animate the movement. I know about several libraries, both for facilitating work and just animation, but I do not want to use them. I do not want to drag the library because of one element. On this question - can I somehow control the animation of svg from JS?

Answer 1

A normal transition should work if CSS-controlled parameters change (Top, Bottom, Left, Right, Padding, Margin, etc.)
Only the position of the SVG should change.