Украсьте свой веб-сайт, используя эти советы и рекомендации по анимации.

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

1. Преобразование элемента при наведении

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

Предположим, у вас есть кнопка:

<кнопка>
 Нажми на меня
кнопка>

Вы стилизовали тело документа, а также кнопку:

/* Выравнивает кнопку по центру страницы */
тело {
отображать: сгибаться;
высота: 100вх;
выравнивание элементов: центр;
выравнивание содержания





instagram viewer

: центр;
фоновый цвет: черный;
}
/* Стили кнопки */
кнопка {
набивка: 1Эм 2Эм;
фон: синий;
граница: 0; 
цвет: белый;
радиус границы: 0.25 бэр;
курсор: указатель;
размер шрифта: 2бэр;
переход: трансформировать 500РС;
}
/* Состояния наведения */
кнопка:наведите,
кнопка:фокус {
трансформировать: перевестиY(0.75 бэр) 500РС;
}

В последнем блоке вы устанавливаете состояния наведения и фокуса на кнопке. В обоих состояниях вы перемещаете кнопку по оси Y на 0,75 бэр. Кнопка будет выглядеть так:

Когда вы наводите указатель мыши на кнопку, она перемещается вверх. Переход занимает полсекунды (500 мс). Это шаблон, который вы можете реализовать не только на своих кнопках, но и на других элементах (например, изображениях).

2. Объявление нескольких ключевых кадров с помощью одного объявления

Еще один распространенный шаблон в CSS-анимациях — многократное повторение одного и того же значения. Это может быть определенный цвет, размер или ориентация. Вы можете добиться этого, используя Анимация ключевых кадров CSS путем объявления нескольких ключевых кадров с одним объявлением.

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

Во-первых, вы хотите анимировать кнопку только при нажатии. Таким образом, вы бы создали script.js файл, внутри которого вы получаете доступ к кнопке и переключаете класс на кнопке при ее нажатии:

константа кнопка = документ.querySelector("кнопка")
button.addEventListener("щелкнуть", (д) ​​=> {
 button.classList.toggle('время веселиться')
})

Мы использовали querySelector для доступа к кнопке с веб-страницы. Чтобы узнать больше об обходе DOM, прочитайте наш пост на как перемещаться по DOM с помощью JavaScript.

время веселиться класс активирует анимацию под названием вечеринка:

.время веселиться {
анимация: вечеринка 2000РСбесконечный;
}

Для анимации вы хотите начать с красного и перейти к желтому на 25%. Затем вы вернетесь к красному цвету при 50%, прежде чем вернуться к желтому при 75%. Наконец, на 100% вы бы согласились на темно-синий цвет:

@ключевые кадры вечеринка {
 0%, 50% {
фоновый цвет: красный;
 } 
 25%, 75% {
фоновый цвет: желтый;
 }
 100% {
фоновый цвет: hsl(200, 72%, 35%);
 }
}

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

3. Использование @property для анимации пользовательских свойств

Как вы, возможно, уже знаете, не все свойства в CSS можно анимировать. Официальный Документация Мозиллы ведет обновленную запись всех анимируемых свойств CSS. Если вы хотите анимировать неанимируемое свойство, лучшим решением будет использовать метод @свойство директива.

Начните с изменения цвета фона вашей кнопки на линейный градиент:

кнопка {
 // другойCSS
фон: линейный градиент(90град, синий, зеленый);
 // другойCSS
}

Вот результат:

Часто вам нужно анимировать цветовой градиент на кнопке. Хотя есть приемы, которые можно использовать для перемещения градиента, на самом деле вы не можете его анимировать. Это потому что фон (а также изображение на заднем плане) не является анимируемым свойством. Это где @свойство приходит в.

@свойство директива позволяет вам регистрировать пользовательские свойства. Когда вы используете @свойство, вы должны предоставить ему три значения, а именно синтаксис, наследует, и Начальное значение:

@свойство --цвет-1 {
синтаксис: "<цвет>";
наследует: истинный;
Начальное значение: красный;
}
@свойство --цвет-2 {
синтаксис: "<цвет>";
наследует: истинный;
Начальное значение: синий;
}

Первое является начальным свойством, а второе — целевым свойством. Теперь вместо перехода к фоновому изображению (которое вы не можете изменить) вы должны перейти от --цвет-1 к --цвет-2 (ваши пользовательские свойства) за одну секунду:

кнопка {
переход: --цвет-1 1000РС, --цвет-2 1000РС;
}

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

4. Использование отрицательных задержек анимации

Задержки анимации имеют решающее значение для создания плавной анимации. Давайте посмотрим на пример этого в действии. В этой части добавьте див элемент с 15 точками над кнопкой:

<дивсорт="точки">
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
<дивсорт="точка">див>
див>

Вот некоторые основные стили для преобразования каждого ребенка див в точку:

.точки {
отображать: сгибаться;
зазор: .5рем;
нижняя граница: 20пикс.;
}
.точка {
ширина: 10пикс.;
соотношение сторон: 1;
фоновый цвет: красный;
радиус границы: 50%;
}

Здесь мы используем Flexbox для размещения точек на горизонтальной линии. Чтобы глубже погрузиться во Flexbox, вы можете проверить наш Учебник CSS Flexbox.

Внутри script.js, добавьте код, запускающий анимацию точек. Вы переключаете танец класс по точкам:

button.addEventListener("щелкнуть", (д) ​​=> {
 button.classList.toggle('время веселиться')
// Новый код
 точки.для каждого((точка) => {
 dot.classList.toggle('танец')
 })
})

Танцевальный класс активирует анимацию под названием рост:

.точка.танцевать {
анимация: рост 2000РСбесконечныйчередовать;
}

Что касается анимации, просто переместите точки на -100 пикселей по оси Y:

@ключевые кадры рост {
 100% {
трансформировать: перевестиY(-100px)
 }
}

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

.точка:nth-ребенок (1) {
анимация-задержка: 100РС;
}
.точка:nth-ребенок (2) {
анимация-задержка: 200РС;
}
.точка:nth-ребенок (3) {
анимация-задержка: 300РС;
}
.точка:nth-ребенок (4) {
анимация-задержка: 400РС;
}
/* Продолжайте, пока не дойдете до 15-й точки */

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

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

5. Используйте Preferences-Reduced-Motion, чтобы включить настройки

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

К счастью, вы можете легко позаботиться об этом, заключив анимацию в Нет предпочтения медиа-запрос так:

@СМИ(предпочитает уменьшенное движение: нет предпочтений) {
.точка.танцевать {
анимация: рост 2000РСбесконечныйчередовать;
 }
}

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

Узнайте больше советов и рекомендаций по CSS

В CSS полно замечательных приемов, выходящих за рамки анимации и переходов. Например, есть советы и рекомендации, как сделать весь макет гладким и отзывчивым. Практики могут помочь вам сделать ваш веб-сайт более привлекательным, доступным и приятным для просмотра. Если вы хотите стать одним из лучших CSS-разработчиков, то вам очень поможет пара хитростей в рукаве.