Добавление анимации CSS в WordPress

Опубликовано: 2022-07-11

Анимация может быть привлекательной и визуально интересной функцией для ваших веб-страниц. Однако создание анимации с помощью Flash или JavaScript съест значительную часть ресурсов вашего сайта.

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

В этой статье мы обсудим, как работает анимация CSS и как добавить свойство анимации CSS на свой веб-сайт с плагинами и без них. Давайте двигаться!

Оглавление

1. Как работают CSS-анимации? (И почему вы должны их использовать)

2. Добавление анимации CSS с помощью плагина

2.1. Шаг 1. Установите и активируйте плагин CSS-анимации.

2.2. Шаг 2: Создайте свою анимацию

2.3. Шаг 3: Настройте задержку и скорость

2.4. Шаг 4: Сохраните и просмотрите свою анимацию

3. Добавление анимации CSS без плагина

3.1. Шаг 1. Понимание задействованных свойств CSS

3.2. Шаг 2. Создайте файл animate.css

3.3. Шаг 3: Загрузите файл animate.css на свой сайт

3.4. Шаг 4. Вызов таблицы стилей Animate через functions.php

3.5. Шаг 5. Примените анимацию с помощью классов CSS

4. Держите свой сайт в отличном состоянии с помощью WP Engine

Как работают CSS-анимации? (И почему вы должны их использовать)

CSS3 предоставляет пользователям возможность создавать анимацию, изменяя стиль элемента (например, изображения или кнопки) с течением времени. Вы можете изменить столько свойств CSS элемента, сколько хотите, столько раз, сколько хотите.

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

Добавление анимации CSS с помощью плагина

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

Шаг 1. Установите и активируйте плагин CSS-анимации.

Для начала вам нужно установить плагин анимации CSS. Мы используем Blocks Animation: CSS Animations for Gutenberg Blocks, относительно новый инструмент, созданный специально для редактора блоков.

Вы можете найти этот плагин, перейдя в « Плагины»> «Добавить новый » на панели управления WordPress. Как только вы найдете его, нажмите «Установить сейчас» , а затем «Активировать »:

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

Шаг 2: Создайте свою анимацию

Затем нажмите на элемент, который хотите анимировать. На вкладке « Блок » боковой панели найдите раздел « Анимация », который был добавлен, когда мы активировали плагин на шаге 1 . Здесь вы увидите раскрывающееся меню со списком нескольких различных эффектов:

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

Шаг 3: Настройте задержку и скорость

Плагин Blocks Animation также поставляется с функцией синхронизации для настройки задержки и скорости анимации:

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

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

Шаг 4: Сохраните и просмотрите свою анимацию

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

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

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

Добавление анимации CSS без плагина

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

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

Шаг 1. Понимание задействованных свойств CSS

Прежде чем приступить к редактированию, необходимо помнить о восьми важных свойствах при создании CSS-анимации:

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

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

В CSS-анимации ключевой кадр определяет, что и когда происходит. Возьмем, к примеру, этот:

 пример @keyframes {
 0% {цвет фона: красный;}
 25% {цвет фона: желтый;}
 50% {цвет фона: синий;}
 100% {цвет фона: зеленый;}
 }

В приведенном выше ключевом кадре указано, что через 25 процентов анимации цвет фона указанного элемента изменится с красного на желтый. Проценты обычно используются для определения времени анимации. Однако от и до можно использовать вместо 0% и 100% соответственно.

Шаг 2. Создайте файл animate.css

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

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

 @ключевые кадры слайдинправо {
из {
-webkit-transform: translate3d(100%, 0, 0);
преобразование: translate3d (100%, 0, 0);
видимость: видимая;
}
к {
-webkit-transform: translate3d(0, 0, 0);
преобразование: translate3d(0, 0, 0);
}
}

Затем нам нужно привязать этот ключевой кадр к классу CSS. В данном случае он был назван slideInRight. Этот код будет размещен непосредственно после ключевого кадра выше в файле:

 .slideInRight {
 -webkit-имя-анимации: slideInRight;
 имя-анимации: slideInRight;
 }

Вы можете повторить этот процесс, чтобы создать столько анимаций, сколько захотите. Затем сохраните файл как animate.css. Кроме того, вы можете загрузить популярный файл Animate.css. Он содержит ключевые кадры и классы CSS для десятков популярных анимаций, поэтому вам не нужно кодировать собственную сложную анимацию.

Шаг 3: Загрузите файл animate.css на свой сайт

Когда ваш файл animate.css будет готов, вам нужно будет загрузить его в каталог вашей темы. Для этого зайдите на свой сайт, используя протокол передачи файлов (FTP) и FTP-клиент, например FileZilla. Вы можете найти необходимые учетные данные в своей учетной записи хостинга.

Вам нужно будет войти в каталог public_html , перейти к wp-content > themes и найти папку для вашей активной темы (или дочерней темы):

Найдите подкаталог css . Если он существует, загрузите в него файл animate.css (или файл animate.mini.css из Animate.css). Если у вас еще нет этой папки, вы можете легко создать новый подкаталог и назвать его соответствующим образом:

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

Шаг 4. Вызов таблицы стилей Animate через functions.php

Затем в папке вашей активной темы найдите файл functions.php . В конце добавьте этот фрагмент кода:

 add_action('wp_enqueue_scripts', 'wpb_animate_styles');
функция wpb_animate_styles() {
 wp_enqueue_style('animate-css', get_stylesheet_directory_uri(). '/css/animate.css', '3.5.0', 'все');
}

Обратите внимание: если вы загрузили файл animate.min.css из Animate.css, вам нужно будет использовать animate.min.css в последней строке вместо animate.css.

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

Шаг 5. Примените анимацию с помощью классов CSS

Теперь вы можете применять любой класс в файле animate.css к элементам ваших сообщений и страниц. Если вы используете файл Animate.css, вы можете просмотреть полный список всего, что он включает, на GitHub.

Перейдите к публикации или странице, содержащей элемент, который вы хотите анимировать. В классическом редакторе переключитесь на текстовый редактор. Если вы используете редактор блоков, щелкните значок с тремя точками на панели инструментов блока и выберите « Редактировать как HTML »:

Затем добавьте анимированный класс и класс для вашей анимации в тег элемента:

Наконец, просмотрите свой пост или страницу. Теперь ваша анимация должна работать:

Вы можете адаптировать этот процесс для включения любой анимации в файл animate.css .

Держите свой сайт в отличном состоянии с помощью движка WP

Использование визуально интересных функций, таких как анимация, может привлечь посетителей вашего сайта и сделать его присутствие в Интернете более профессиональным. Здесь, в WP Engine, мы гордимся тем, что предоставляем лучшие советы и рекомендации для разработчиков WordPress, чтобы ваш сайт всегда выглядел наилучшим образом.

В сочетании с нашей первоклассной хостинговой платформой у вас будут все инструменты, необходимые для того, чтобы произвести впечатление на ваших пользователей. Ознакомьтесь с нашими планами на сегодня!