Для того чтобы несколько оживить веб ресурсы или привлечь внимание к важному, часто используется анимация. Анимация может реализовываться самыми разными способами. Самое просто это пожалуй гиф картинки, то до настоящего времени используется повсеместно и везде. В этом есть большой плюс, код для оформления анимации весьма прост.

Все остальное несколько сложнее. А это использование либо JS, либо CSS. В конечном счете JS все равно работает через подмену CSS, поэтому можно все сразу же реализовать на стилях. Именно такой пример для меню на CSS и приведу в этой статье.

Собственно первым делом плоды моего труда. Конечно всегда можно еще что-то доделать, но само важное здесь будет то, что я расскажу о правилах появления видимости, а значит о принципах анимации на CSS в целом. Итак, пример.

Сами своими руками

Теперь надо посмотреть на код, как же это реализованою

Смотреть код

А вот после всего вышеприведенного можно поговорит и о том, как осуществляется анимация.

Дело обстоит так. Есть блоки разбитые на группы:

.bl1,.bl3,.bl5,.bl7,.bl9

еще одна группа .bl2, .bl4,.bl6,.bl8

также .bl10

и последний блок .textmenu.

Для каждой группы из этих блоков задается свой стиль, но самое главное это анимация строками: animation:

show 9s infinite ease-in-out; /* Указываем название анимации, её время и количество повторов*/,

еще - animation-duration: 9s /*продолжительность*/;

и animation-name: slidein1 /*наименование анимации*/

То есть у нас теперь есть время анимации и ее наименование. Дальше как раз и используем эти операторы для распределения времени появления каждой группы в стилях с помощью @keyframes. Именно там используя проценты перед командой прозрачности и задаем когда по времени должна появляться, либо пропадать группа.

Осталось сказать, что меню это не полноценное, так как в нем нет ссылок и открывающихся подгрупп, но это видимо надо уже отнести к теме другой статьи.