After .reverse() it does not go back to its original position, using variables

[Faith Akakpo]

I am practising using variable to access css pseudo selectors, this was easy to complete but after you leave the button it does not go back to its original state. The variable I used is 24px but after mouse leave it is less than 24px.

 

A Pen by faisy227 (codepen.io)

See the Pen GRaMyOK by faisy227 (@faisy227) on CodePen

[Carl]

Thanks for the demo, it was very helpful.

 

Yes, the tween does reverse to a smaller value but it is also starting at that same value.

Set the duration of the tween to 10 and you will see that as soon as you mouseenter the borders will jump to small state and then grow.

 

I believe the main cause for the discrepancy is that your --the-size property is initially set in px but you are tweening to percent.

 

Notice how using % for both yields consistent results

 

See the Pen KKLXZYX?editors=0110 by snorkltv (@snorkltv) on CodePen

 

Since the same percent is used for the width and height the starting state will not look the same as in your example. 

You may need to animate width and height with different values.