Как реализовать анимацию для табов в css3?

Question

[lexstile]

Есть примерно такие табы:

Нужен плавный переезд стилей активной вкладки на вкладку, по которой произошел клик (не мгновенный).
Но время должно быть одинаковое, то есть - кликаем по соседней - скорость ниже, время t; кликаем через одну или две - скорость выше, но время по-прежнему t)
Без использования JS.
Был бы благодарен примерам с песочниц и/или подсказке, в какую сторону двигаться.

Answer 1

[Вадим]

Comments

[lexstile]

То что нужно, идея такая же! Благодарю.

[lexstile]

А на дивах реально сделать или только с ипользованием радио? (не пойму)

[Вадим]

lexstile, можно переделать на все что угодно, у чего есть состояния, которые доступны из css.

Если брать конкретно дивы, то нужно будет им задать tabindex=0 и переключать состояния по фокусу

[lexstile]

Вадим, благодарю за ответ.
Если несложно, пожалуйста, можно еще один вопрос?
А если я хочу, чтобы тот же slider, как в примере, был по ширине текущего элемента?

[Вадим]

lexstile, там вся механика основана на том, что все элементы одинакового размера. В слайдере есть индикатор. В демке он ограничен на 50px.

[lexstile]

Вадим, это я вижу.
Чтобы это реализовать, нужно, чтобы индикатор был внутри обертки элемента.
Возможно ли это провернуть с before/after?

[Вадим]

lexstile, Так, ну, поменяйте ширину indicator с 50px на 100% и будет он на ширину всего элемента, так как обёрнут в slider, ширина которого равна ширинам элементов.
Или Вы хотите чтобы табы были разного размера?

[lexstile]

Вадим, да, табы разного размера - с одинаковыми понятно было бы.

[Вадим]

lexstile, Ну тогда может и есть какой-то хак, но мне он в голову не приходит.