Интерактив и CSS

Я считаю, что с появлением анимации в CSS, интерактивность, достигаемая без использования JavaScript вышла на новый уровень. После экспериментов с вложенными повернутыми структурами, мне стало интересно посмотреть как выглядит анимация таких структур, хороши они тем, что там надо анимировать всего один стиль, а структура сама будет выделывать всякие дикие штуки.

Например, если анимировать градус поворота, то получится забавный червяк, закреплённый с одного конца. Легко можно сделать, чтобы он ползал и извивался буквой «S», если бы целую кучу префиксов не приходилось писать.

Червяк (8.38КиБ)

Но самое потрясающее — возможность добавлять интерактив, жаль только возможности браузеров в этом пока очень ограничены. Попробуйте поводить курсором мыши по червяку и закон его движения изменится, причём совершенно без JavaScript! Изменится случайным порядком — всё зависит от того как вы проведёте мышкой.

Устройство простое (если убрать лишнее):

@keyframes wag {
    50% {
         transform: rotate(10deg);
    }
}

сегментхвоста {
       /* остальные стили */
        transform: rotate(-10deg);
        animation-name: wag;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
}

сегментхвоста:hover {
        animation-name: none; /* отключаем анимацию, если навели мышкой */
}

На наведение мышкой анимация отключается, от начала червяка до места наведения (теги-то вложенные) причём остальные сегменты всё ещё анимируются. Если убрать мышку, то анимация начинается с начала, поэтому, поводив мышкой, можно заставить червяка причудливо извиваться — анимация разных сегментов будет стартовать в разные моменты времени!

Поделиться
Отправить
17 комментариев
Мохов Олег (o-mokhov.ya.ru) 2012

К сожалению у анимаций в CSS есть один большой недостаток: их нельзя сделать, если физический параметр заранее неизвестен. Например, ты не можешь схлопнуть элемент красиво по высоте, если его высота в CSS не фиксирована... :(

Евгений Степанищев (bolknote.ru) 2012

Комментарий для o-mokhov.ya.ru:

Почему же? Вот это у меня работает:

http://pastebin.com/hy66Yw0k

A.I. (sitnik.ru) 2012

А зачем писать префиксы, когда есть Sass и Compass?

Антон Романов 2012

Комментарий для Евгения Степанищева:

Евгений, например, в препроцессоре Stylus, код будет выглядеть именно так, как написанно в вашем «если убрать лишнее». Попробуйте!

Евгений Степанищев (bolknote.ru) 2012

Комментарий для Антон Романов:

Я знаю о их существовании, но для наколеночной странички это слишком, по-моему. Есть ещё какой-то небольшой JS, который тоже добавляет все нужные префиксы, но его опять же, подключать надо. Мне проще запустить один макрос в текстовом редакторе моём.

hshhhhh (hshhhhh.name) 2012

Комментарий для Евгения Степанищева:

волшебник %)

TATAPuH 2012

Цвет вот только не самый удачный выбрали для демонстрации :)
не червяка напоминает, а хм, ну как бы так сказать ...

Евгений Степанищев (bolknote.ru) 2012

Комментарий для TATAPuH:

Пациент: Доктор, я сексуальныи маньяк!
Доктор: Сейчас проверим, голубчик, не волнуйтесь.
Показывает лист бумаги, на котором нарисован треугольник.
Д.: Что это, по-вашему?
П. (смущенно хихикая): Ой, доктор, ну мне право даже как-то неудобно…
Д. (показывая другой рисунок, с квадратом): Таак, ну, а это что?
П. (по-прежнему): Ну что вы, доктор, ну как я могу, ну разве можно…
Д.: Ясненько…
Начинает заполнять историю болезни.
П.: Доктор, а вы сами не сексуальный маньяк?
Д. (в крайнем удивлении): Почему?!
П. (хитро): А откуда у вас такие картинки?

mr-simm.livejournal.com 2012

Попробуйте поводить курсором мыши по червяку и закон его движения изменится

Всё равно статика… пробовал на Win7 в Opera x64 12.00 alpha build 1293 (незаконченная окружность) и в IE 9.0.8112.16421 (прямая с правого края).

Евгений Степанищев (bolknote.ru) 2012

Комментарий для mr-simm.livejournal.com:

IE10 только. «Опера» 12.01 у меня работает (а почему альфа-то?).

TATAPuH 2012

ну мне бы больше понравился пример с падающими листьями, лепестками, цветами на пол часа работы больше а выглядит презентабельнее
вы подобное и своему начальству, клиентам, пользователям показываете ?

но раз вам так нравится, впрочем вы ведь доктор и это ваши картинки

Евгений Степанищев (bolknote.ru) 2012

Комментарий для TATAPuH:

ну мне бы больше понравился пример с падающими листьями, лепестками, цветами на пол часа работы больше а выглядит презентабельнее

Мне интересны вложенные и повёрнутые структуры, а не простейшая анимация. Зачем мне заниматься тем, что мне совершенно понятно?

вы подобное и своему начальству, клиентам, пользователям показываете?
но раз вам так нравится, впрочем вы ведь доктор и это ваши картинки

Вы не поняли о чём анекдот, похоже. :)

Евгений Степанищев (bolknote.ru) 2012

Комментарий для TATAPuH:

ну мне бы больше понравился пример с падающими листьями…

Должен подчеркнуть то, что я писал неоднократно: в этом блоге я пишу прежде всего для себя, но рад обсудить что-то, если темы будут интересны кому-то ещё. Отсутствие интереса я обсуждать не хочу, мне очевидно, что не всё интересно всем. Чьи-то личные ассоциации — не моя проблема, я их обсуждать не хочу и ради них менять что-то тоже не буду. Так же, если кому-то интереснее читать что-то другое, я не понимаю в чём проблема вообще — интернет большой.

mr-simm.livejournal.com 2012

Комментарий для Евгения Степанищева:

«Опера» 12.01 у меня работает (а почему альфа-то?).

Так нет свежее x64, во всяком случае при проверке обновлений опера заявляет, что это — свежайшая.

SiMM (mr-simm.livejournal.com) 2012

На 12.02 (на XP x32) пашет, да ­- но предыдущие версии раннее глючили (в частности при большом числе вкладок) — приходилось откатываться на 11.64 — с этой пока не замечал проблем.

SiMM (mr-simm.livejournal.com) 2012

Комментарий для Евгения Степанищева:

Хм… а почему предпредыдущий комментарий получился анонимным? В ЖЖ между ними не заходил :)

Евгений Степанищев (bolknote.ru) 2012

Комментарий для mr-simm.livejournal.com:

Так нет свежее x64, во всяком случае при проверке обновлений опера заявляет, что это — свежайшая.

Видимо потому и не пашет, что альфа.

Хм… а почему предпредыдущий комментарий получился анонимным? В ЖЖ между ними не заходил :)

ЖЖ не ответил в этот момент. Я решил, что меньшее зло считать комментарий анонимным, чем ждать, когда ЖЖ ответит.

Популярное