Заставить фоновый цвет красиво «скользить» между ячейками таблицы с помощью чистого CSS? ⇐ CSS

[Anonymous]

У меня есть таблица, в которой некоторые ячейки каждой строки содержат метки и переключатели.
Метка активной ячейки имеет цвет фона, чтобы идентифицировать ее как активную. >
Если пользователь меняет активную ячейку, я бы хотел, чтобы цвет фона «скользил» из активной в данный момент ячейки в вновь выбранную ячейку.
У меня это своего рода работает с использованием псевдоэлементов и преобразования: TranslateX(...); с этим кодом здесь:

https:/ /jsfiddle.net/moj791dh/


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

/* Apply sliding effect */
td {
position: relative;
overflow: hidden;
}

label::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s ease;
transform: translateX(100%);
z-index: -1;
}

/* First column always exits right */
td:first-of-type label::before {
transform: translateX(100%);
}

/* Last column always exits left */
td:last-of-type label::before {
transform: translateX(-100%);
}

/* Selected label */
label:has(input[type="radio"]:checked)::before {
transform: translateX(0);
}

/* Labels after the selected label always exit left */
td:has(input[type="radio"]:checked) ~ td label::before {
transform: translateX(-100%);
}

Код: Выделить всё

Option 1





Option 2





Option 3





Option 4





Option 5

Вы увидите, что это работает довольно хорошо, если последовательно щелкать ячейки. Он выглядит красиво, плавно и соответствующим образом меняет направление.
Однако, если вы щелкнете более широко (например, от ячейки №1 до ячейки №5), это начнет выглядеть некрасиво.
Каждая строка таблицы должна иметь собственный «скользящий» фон.
Есть ли способ добиться этого с помощью чистого CSS, в идеале без каких-либо дополнительных HTML-элементы? Я чувствую, что так и должно быть, особенно с учетом недавних достижений в отношении правила @property и т. д., но я не могу этого понять!

Подробнее здесь: https://stackoverflow.com/questions/791 ... g-pure-css