Для того чтобы несколько оживить веб ресурсы или привлечь внимание к важному, часто используется анимация. Анимация может реализовываться самыми разными способами. Самое просто это пожалуй гиф картинки, то до настоящего времени используется повсеместно и везде. В этом есть большой плюс, код для оформления анимации весьма прост.
Все остальное несколько сложнее. А это использование либо JS, либо CSS. В конечном счете JS все равно работает через подмену CSS, поэтому можно все сразу же реализовать на стилях. Именно такой пример для меню на CSS и приведу в этой статье.
Собственно первым делом плоды моего труда. Конечно всегда можно еще что-то доделать, но самое важное здесь будет то, что я расскажу о правилах появления видимости, а значит о принципах анимации на CSS в целом. Итак, пример.
Теперь надо посмотреть на код, как же это реализовано
Смотреть код
А вот после всего вышеприведенного можно поговорит и о том, как осуществляется анимация.
Дело обстоит так. Есть блоки разбитые на группы:
.column
еще одна группа .column1
Для каждой группы из этих блоков задается свой стиль, но самое главное это анимация строками: animation:
show 9s infinite ease-in-out; /* Указываем название анимации, её время и количество повторов*/,
еще - animation-duration: 9s /*продолжительность*/;
и animation-name: slidein1 и slidein0 /*наименование анимации*/
То есть у нас теперь есть время анимации и ее наименование. Дальше как раз и используем эти операторы для распределения времени появления каждой группы в стилях с помощью @keyframes. Именно там используя проценты перед командой прозрачности и задаем когда по времени должна появляться, либо пропадать группа.
Осталось сказать, что меню это не полноценное, так как в нем нет ссылок и открывающихся подгрупп (есть только для кнопки "Главная"), но это видимо надо уже отнести к теме другой статьи. Хотя какая другая статья, расставить ссылки это уж совсем не проблема!
Здесь же надо сказать и о правиле @media, которое прописано в стилях и работает при ширине окна менее 600 пикселей. В этом случае стили в строку обнуляются и кнопки выстраиваются в столбик.