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

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

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

Но самое потрясающее — возможность добавлять интерактив, жаль только возможности браузеров в этом пока очень ограничены. Попробуйте поводить курсором мыши по червяку и закон его движения изменится, причём совершенно без 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; /* отключаем анимацию, если навели мышкой */
}

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