Changing transform-origin for hover effect (enter left, exit right)

Hi. One thing I've always struggled to understand is how to change

transform-origin

transform-origin

so that an animation smoothly enters from one side on hover and exits on the other when it loses the hover state. Here's what I have: https://jsfiddle.net/Matthais/epnky1o8/

Pretty sure Kevin did a video where he covered this a couple of years ago but would be a needle in a haystack to find.

Would be grateful if anybody can please point out where I'm going wrong

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

MarkBoots•10/27/22, 11:10 AM

set the default origin on normal state, and change it in the hover state
simple example
https://codepen.io/MarkBoots/pen/ZERYmaW

Joao•10/27/22, 11:10 AM

I think this is the video? https://www.youtube.com/watch?v=ceNMP-aQkQ4

MMarkBoots set the default origin on normal state, and change it in the hover state simple ...

MatthaisOP•10/27/22, 1:23 PM

I was already doing this in my example, just with percentage values rather than the strings.

After further playing around the issue was my lack of specificity () on my transition, rather than targeting specifically. It seems like

transform-origin

transform-origin

is effected by the property otherwise.

MatthaisOP•10/27/22, 1:24 PM

https://jsfiddle.net/Matthais/epnky1o8/