Удивительно простой, но красивый CSS-эффект

[@Adorable]

Действительно, чудесно!
Временааа…

[@Vendolin]

Знать бы где будет работать еще…

[@Goobs]

это ж бордер… Насколько помню, были разночтения насчет него у разных броузеров… Тут вопрос освещен подробно

[@Barmunk]

Жаль в ие все неадекватно =(

большой скрин

[@dotsquid]

По-моему, Опера переплюнула ИЕ в этот раз (Opera 12.02 1578 x64):

[@WieFix]

аналогично.
Версия: 12.01

[@homm]

Вы будете смеяться, но неправильна отрисовка ка раз в Хроме. Чтобы в этом убедиться, достаточно поменять время анимации с ,5 секунда на 5 секунд и внимательно посмотреть. В Опере не верно отрисовывается только последний вариант.

[@Niksg]

Второй слева в среднем ряду — вылитый PacMan!

[@Dyo]

IE 9.0.8 в этом деле мастер, его не переплюнешь ) вообщем под ним не работает ни один из вариантов…

[@phanta]

считаю пора на сайтах выводить сообщение, об устаревшем браузере не только для IE 6, но и IE 9 =)

[@Otkrick]

«вы используете Internet Explorer, для работы с сайтом установите браузер»

[@TiGR]

ЕМНИП, тут про неадекватность говорить не приходится, т.к. в стандарте про крайние случаи ничего не сказано.

[@ftdgoodluck]

В 10 IE аналогично

[@Matrosked]

здорово, особенно первые 3 варианта понравились в применении по клику на элемент (:active).
А по поводу Opera — действительно, 12.02 версия, все печально. Но не велика потеря.

[@TiGR]

А что именно печально? Вы можете сказать, каким стандартом регулируется поведение браузера в данной ситуации?

[@exIV]

Во всех движках ведет себя абсолютно по-разному :) Больше всего понравилось как в FF, в WebKit'е не так красиво…

[@Vend3tta]

К слову, вы уже можете не писать вендорное правило -ms-transition — IE10 понимает беспрефиксное правило, само же вендорное правило использовалось лишь в IE10PP. caniuse.com/#search=transition

[@Mithgol]

Эффект прекрасен (у меня в Файерфоксе), но я посмотрел в комментариях скриншоты из других браузеров и вздрогнул.

[@webkumo]

А вот вы, Мицгол, лучше возьмите иные браузеры да и гляньте, как реально в них выглядит эффект. В частности, второй эффект в Опере гораздо интереснее (в файерфоксе он, почему-то, совпадает с первым). Ну и третий вариант у файерфокса от остальных тоже дюже отличается.
Хотя да, согласен, что качество обработки эффектов в разных браузерах доставляет… такое ощущение, что они все дюже в различных моментах ошибаются.

[@yourick]

О боже! Не показывайте это дизайнерам! (думалось, время свистелко-перделок на сайтах прошло, ан нет)

[@amorphius]

Морально поддерживаю (по-другому не получается =)). Не могу представить себе ни одного сайта с подобным рюшечками, кроме как портфолио, где можно похвастаться, что так умеешь.

[@MaxBrain]

Отчего бы не показать. Если дизайнер нормальный — придумает куда это можно применить. Если не нормальный — то это же самое на javascript, flash или анимированных гифах сделает. Дурное дело не хитрое.

[@Pixat]

Поздно, уже твитнул и разослал ссылку коллегам…

P.S. Шучу, я слишком уважаю труд верстальщика что бы так выносить ему мозг ;)

[@f0b0s]

В сафари под маком последним не работает, даже хуже, чем на скриншотах выше.

[@Pixat]

Вы еще людей под маком не видели — о работоспособности не может быть и речи.

[@ArtRoman]

Позвольте не согласиться, работает и в Сафари, примерно на уровне Хрома — две пары эффектов совпадают. В Опере, конечно, выглядит забавнее всего. В фф анимируется вообще иначе, но наиболее плавно.

[@Mezomish]

Первый слева (в каждом из рядов) ещё ничего, остальные вызывают устойчивые ассоциации с 90-ми, когда на страничке каждого кулхацкера (на boom.ru или narod.ru, разумеется) просто обязательно должно было быть с десяток анимированных гифок и обязательно теги «blink» (для NN) или «marquee» (для IE).

[@philpirj]

А бегущая строка?

[@bomb]

marquee она и есть

[@Yeah]

А еще JS часы в строке состояния…