Включите свои меню, используя анимацию с CSS

Sep 14, 2025

Инструкции

Это через анимацию, что мы имеем смысл мира: двери качаются открытыми, автомобили едут к своим направлениям, губы скручиваются в улыбки. Даже вещи, которые чувствуют мгновенные, как молния поразительно или бросают телефон на ваше лицо, используя его в постели, происходит со временем. Это через это движение, которое мы понимаем, как относится и функционируют объекты; Если они легкие или тяжелые, жесткие или свободные, связанные или отдельные, липкие или скользкие.

В Интернете, однако, мы привыкли казаться и исчезнуть в мгновение ока. Мы нажимаем на ссылку и все меняется. Это все равно, что привело в комнату с завязанными глазами, крутиться около нескольких раз и удаляя повязку, чтобы взять в окрестностях. Вы даже не знаете, через какую дверь вы проходили. Это по большим, как большинство сайтов построены. Мы можем сделать лучше.

При изучении потенциала CSS анимация , Может быть легко позволить нашему воображениям входить в Hyperdrive и посыпать анимацию практически обо всем. Хотя анимация может быть великолепна, нам нужно быть осторожным и всегда спрашивать себя: это значимая анимация? Это добавляет какое-либо ценность, кроме как прекрасным? Это облегчает использование нашего продукта?

Значительная анимация

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Это отправная точка для учебника - пример меню, которое мы раскроем с анимацией

В этой статье мы идем работать с общим UI Design Элемент: меню переключается. Мы собираемся создать меню (и значок, чтобы пойти с ним) с CSS и заставить его оживить с анимацией. Мы позаботимся о том, чтобы анимацию были значимыми, но также применяют лучшие практики веб-характеристик, чтобы обеспечить максимально возможным гладким.

Вы можете Предварительный просмотр конечного результата здесь Отказ Когда пользователь нажимает значок меню, мы расширим фоновую пластину значка (круг), чтобы покрыть экран и представить наложение меню.

Вместо того, чтобы просто вспыхнуть до конца значка, мы собираемся анимировать и морфировать три вертикальные линии (которые составляют значок меню) в 'x', чтобы представлять значок закрытия. Другими словами, поскольку меню раскрывается значок Morphs в кнопку закрытия.

Связанные элементы

Вы можете думать «Итак, это значимая анимация?» Ну, отличный вопрос. Краткий ответ: Да! Дольше ответа: анимация отлично подходит для соединительных элементов на экране и показывая, как они относятся друг к другу.

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

Точно так же, как правило, как включение / выключение трансформаций между его включением и выключением, когда вы нажимаете его на iOS, наше меню меню изменится между значком меню и значком закрытия в зависимости от того, если меню нашего сайта видны или скрыты. Это помогает обеспечить применение идеи, что две значки функционируют аналогичным образом: они оба управляют меню.

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

Посмотрите, как это сделать в видеоуроке выше и письменные шаги ниже.

01. Начните

By drawing the menu icon with CSS (and no images), we can easily animate it later — Рисуя значок меню с CSS (и без изображений), мы можем легко оживить его позже

Загрузите файлы проекта Отказ Открыть index.html. В браузере, и вы должны увидеть три больших ссылки на белом фоне. Это наложение меню, которую мы раскроем.

Прежде всего нам нужно скрыть это. В styles.css добавьте эти стили к .Menu-Outlay. :

 непрозрачность: 0;
Видимость: скрыто;

При прошедшем наложении кнопка должна появиться в верхнем левом углу. Давайте нарисовать наш значок меню здесь, поэтому есть что нажать, чтобы показать наложение. Чтобы облегчить анимацию, мы нарисуем его, используя только HTML и CSS; нет растровых изображений или векторов. У нас уже есть HTML в index.html. Для меню: контейнер ( .меню ), задний фон ( .Мам-круг ), ссылка ( .menu-link. ) и значок ( .menu-icon. ) с одним диапазоном для каждой строки.

Иметь отдельный девочка Для фона несколько нестандартный подход. Если бы мы не собирались добавить анимацию в этот круг, нам не понадобится отдельный девочка ; мы могли бы просто добавить пограничный радиус и цвет фона для нашего Меню-ссылка Отказ

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

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

. Menu-line {
 Фон-цвет: # 333;
 Высота: 2PX;
 Ширина: 100%;
 Границы-радиус: 2PX;
 Должность: абсолютный;
 Слева: 0;
}

Затем мы можем использовать уникальные классы строк для установки вертикального положения:

. Menu-Line-1 {Top: 0; }

.Menu-Line-2 {
 Вершина: 0;
 Дно: 0;
 Маржа: Авто;
}

.menu-line-3 {дна: 0; }

02. Добавить эффект зависания

To make the menu appear clickable, we inflate the background plate on hover — Чтобы появиться меню кликабели, мы надуваем фоновую тарелку на Hover

Давайте сделаем значок явно кликабельна, добавив эффект зависания. В styles.css Создайте новый селектор для меню-круг Чтобы масштабировать его при наведении зависания в меню:

 .menu: hover .menu-circe {преобразование: масштаб (1.4); }

Теперь мы можем добавить нашу первую анимацию. Добавлять «Переход: все 0,2с облегчает» к .Menu-Circle {} (Не в состоянии зависания). Мы говорим браузеру анимировать все свойства, которые могут измениться для .Мам-круг Отказ Поэтому, когда мы масштабируем его на парех, он анимирует в течение 0,2 секунды до его нового состояния, с функцией времени синхронизации ослабленный Отказ

Откуда вы знаете, какие функции времени на выбор? Прежде всего, избегайте использования функции линейного времени. Несколько вещей в реальном мире движутся на совершенно постоянной скорости, поэтому объекты, анимированные с помощью функции линейных синхронизации, как правило, выглядят неестественными и жесткими (так как Эйнштейн сказал, что «Бог не играет в кости с линейной функцией времени»).

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

03. Показать и скрыть меню

Давайте использовать jQuery, чтобы показать и скрыть наш недавно созданный наложение. В Script.js. , переключите класс открыто на .Menu-Outlay. Внутри существующего обработчика щелчка:

<Код> $ (". Меню наложение"). ToggleClass («Open»);

Затем показать накладку, когда у него есть класс Open:

. Menu-Outlay.Open {
 непрозрачность: 1;
 Видимость: видимая;
}

04. Подключите значок меню

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

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

Нам нужно иметь возможность стиль круга меню, когда меню нажал. Открыть Script.js. и внутри нашего существующего клика функция переключить класс открыть для нашего .меню :

 <Код> $ (". Меню"). ToggleClass («Open»);

Теперь мы можем нацелить этот класс с CSS и расширить круг, поскольку меню открывается. В самом нижней части still.css Расширьте .Мам-круг когда .меню также имеет класс .открыто :

. Menu.Open .menu-circe {преобразование: масштаб (60);
}

05. Превратите значок

The white circle expands to become the menu background, and the icon morphs into an 'X' — Белый круг расширяется, чтобы стать фон меню, а значок Morphs в «X»

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

. Menu.Open .menu-line-2 {непрозрачность: 0; }

Тогда все, что нам нужно сделать, это перевернуть две две линии 45 градусов в противоположных направлениях (линии должны указывать в разных направлениях, чтобы сформировать «X», поэтому обратите внимание, как одна из линий имеет отрицательное вращение 45 градусов):

. Menu.Open .menu-line-1 {
 Преобразование: повернуть (-45DEG);
}

.Menu.open .menu-line-3 {
 Преобразование: вращение (45DEG);
}

Ну, вроде. Нам также нужно центрировать эти две линии вертикально. На данный момент вы можете думать «Легко! Нам просто нужно изменить верх и Нижний положение для центра их. И ты был бы прав - если бы мы не анимировали этот значок.

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

. Menu.Open .menu-line-1 {
 Преобразование: Translatey (7px) переведением (-50%) вращается (-45DEG);
}

.Menu.open .menu-line-3 {
 Преобразование: Translatey (-7PX) переведением (50%) вращается (45DEG);
}

Эти преобразования будут перемещать две строки, чтобы они были вертикально сосредоточены внутри контейнера значка, а затем повернут их, чтобы сформировать крест.

Давайте сломаемся. У нас есть две переводы, используемые одновременно: Translatey (7px) и Переведен (-50%) Отказ Первое преобразование, Translatey (7px) , используется для перемещения верхнего края линии в вертикальный центр холста. Математика здесь проста: 14 - высота нашей иконы, разделив ее на два, мы получаем среднюю точку: 7.

Второе преобразование, Переведен (-50%) , используется для перемещения линии так, чтобы вертикальный центр линии, а не верхний край, находится на вертикальной центральной точке холста.

Обычно при использовании % Войдите в CSS, которые вы обращаетесь к родителю элемента (настройка Ширина: 100% Соответствует ширину элемента к этому из родителей), но если вы используете проценты с свойством преобразования, вы обращаетесь к самому элементу, а не родитель. Так для нас, чтобы найти высоту линии и переместить ее вверх на половину этого, все, что нам нужно, это Переведен (-50%) Отказ

06. Морф между иконами

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

Начать с добавления перехода на .Маньско в still.css :

 Переход: все 0,25 ослабление;

Та-да! Значок меню морфинга. Хотя анимация немного скучно. Давайте исправить это. Чтобы строки появились более яркими, мы можем повернуть их как дополнительные 90 градусов. Икона будет выглядеть одинаково в конце концов, но линии будут путешествовать дальше в течение того же периода времени. Изменить вращения на вращаться (-135DEG) и вращаться (135DEG) Отказ

Как правило, вы всегда можете улучшить анимацию, используя пользовательскую кривую Bézier, которая лучше адаптирована к вашей анимации. В настоящее время мы используем ослабленный - Это означает, что анимация будет иметь медленное начало и окончание, с более быстрыми темпами в середине.

Я думаю, что более весенний эффект подходит для нашей иконы. Давайте быстро займенемся, с эффектом небольшого отката, когда подходит к концу. За .Маньско , заменять " облегчить С пользовательской кривой Безии:

 Переход: Все 0,25-е годы Cubic-Bezier (0,175, 0,885, 0,32, 1,275);

Какие все эти цифры? Не волнуйтесь: кривые Безье редко написаны вручную. Ты используешь Cubic-Bezier () Чтобы определить темпы анимации с течением времени, а вместо того, чтобы написать их самостоятельно, я рекомендую использовать ссылочный сайт. Это исходит от Easys.net. Он превосходит в конце анимации и создает тонкий эффект отказов.

Пока мы на этом, переходите к Eassings.net.net и схватить код для EaseOutexpo. Отказ Мы будем использовать это для создания более изысканного эффекта для фоновой анимации меню. Обновить переход .Мам-круг Чтобы использовать эту пользовательскую кривую Безии и сделать анимацию немного дольше (0,5с):

 Переход: все 0,5-е кубический рыберь (0,19, 1, 0,22, 1);

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

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

Эта статья изначально появилась в Чистый журнал Выпуск 281. Подписаться на Net здесь Отказ

Статьи по Теме:

10 впечатляющих примеров анимации CSS3
28 выдающихся примеров CSS
Начните с веб-доступности

Включите свои меню, используя анимацию с CSS

Значительная анимация

Связанные элементы

01. Начните

02. Добавить эффект зависания

03. Показать и скрыть меню

04. Подключите значок меню

05. Превратите значок

06. Морф между иконами

Инструкции - Самые популярные статьи

Нарисуйте силу контрастности в арт

6 Быстрые советы по улучшению рисунка кисточек

Как создать Pin-Up Art

Как ускорить ретопологию в майю

Как реализовать светлые или темные режимы в CSS

генерировать бесконечные цветные палитры с хромой

4 совета по улучшению производительности вашей страницы

Документируйте свои проектные системы с фракталом

Категории