I’ve got a table where some of each row’s cells contain labels and radio buttons.
The active cell’s label is given a background color to identify it as active.
If the user changes the active cell, I would like the background color to "slide" from the currently-active cell into the newly-selected cell.
I’ve got it kind-of working using pseudo-elements and transform: translateX(...); with this code here:
https://jsfiddle.net/moj791dh/
You’ll see it works quite nicely if you click the cells sequentially. It looks nice and smooth and it changes direction appropriately.
However if you click around more widely (e.g. cell #1 to cell #5) then it starts to look ugly.
Is there a way to achieve this in pure CSS, ideally without any extra HTML elements? I feel like there should be especially with the recent advances with the @property rule etc. but I can’t figure it out!
You need to sign in to view this answers
