CSS-анимации: что это и как научиться их настраивать

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

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

Что такое CSS

В начале двухтысячных за анимацию отвечала технология Flash. Она была требовательной к ресурсам компьютера — сайты с «флешем» грузились очень долго. 

На смену Flash пришла анимация на JavaScript, или JS, — этот язык помог сделать сайты интерактивными, не требуя больших ресурсов.

Сегодня анимацию веб-ресурсов делают в основном на языке CSS (Cascading Style Sheets, или каскадные таблицы стилей) — этот язык отвечает за стиль веб-страницы. Для сложных анимаций советуют использовать JS, но часто CSS может обойтись без помощи JavaScript.

HTML создает структуру страницы, а CSS — ее внешний вид. Чтобы CSS-стили заработали, нужно совместить их с HTML-документом, в котором прописана ваша веб-страница. 

Что означают каскады в CSS

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

Мы организуем стили в CSS каскадом — один за одним. Если прописать несколько однотипных стилей последовательно, учитываться будет только последний. Например:

Результат будет такой же, если оставить только черный цвет:

Как добавить стили в CSS-файл

Чтобы не прописывать стили в тексте HTML-документа, нужен новый файл с расширением CSS и названием на латинице. В нем прописываем свойства объекта по принципу:

селектор { свойство: значение; }

Селектор — тег HTML, целый класс объектов или ID одного объекта.

Свойство — параметр, который мы задаем. Например, цвет.

Значение — нужный вариант параметра. Например, красный.

Рассмотрим пример с сайта Geekbrains:

.my-class {

       background-color: #999;

}

Здесь у всех объектов с селектором my-class будет серый фон. #999 — это значение цвета. Также его можно указать словом — например, blue.

Как добавить CSS-файл в HTML-документ

Мы прописываем стили в отдельном документе с расширением .css и добавляем ссылку на этот файл в наш HTML. Для этого нужны:

— CSS-файл со стилем. Он может лежать на жестком диске в одной папке с HTML или быть в интернете — тогда доступ к файлу придется давать через его URL-адрес;

— тег <link>, через который мы связываем HTML с нужным CSS-файлом;

— атрибут rel="stylesheet". Он показывает браузеру, что добавляемый файл — это таблица стилей, она же stylesheet;

— ссылка на файл через команду href. Если CSS-файл лежит в одной папке с HTML, то мы просто прописываем его название. Например, нам нужно добавить файл style.css — тогда ссылка будет выглядеть как: href="style.css"

— если CSS-файл лежит в интернете, то мы прописываем его прямой адрес. Например: href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/CSS/bootstrap.min.CSS"

Отличия CSS-анимации от JS

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

CSS-анимация — простейший способ привести элементы на экране в движение. 

Чтобы воссоздать на JS аналог CSS-анимации, потребуется либо громоздкий код, либо дополнительная библиотека типа jQuery. В ней развернутые действия прописаны как одна команда. Это упрощает работу с библиотекой, но не делает ее такой же простой, как работа с CSS.

Конструкторы и готовые библиотеки CSS-анимации

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

СSS Animations Generator

CSS Animations Generator помогает настроить анимацию и форму объектов, фон, цвет и параметры текста.

Justinaguilar

Justinaguilar — пример библиотеки готовых CSS-анимаций, которые нужно только скачать и вставить на сайт. Останется лишь применить эффект к нужному объекту на странице.

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

Minimamente

Ресурс Minimamente предлагает 64 варианта готовой анимации. Здесь нет пошаговой инструкции, как добавить нужные CSS-действия в код страницы.

Как настроить CSS-анимацию

Как мы уже говорили, для CSS-анимации на странице нужно два элемента: 

— объект, который нужно анимировать. Его прописываем в HTML-файле;

— параметры объекта и анимации. Их прописываем в CSS-файле.

Помните: чтобы анимация работала, ссылка на CSS должна быть прописана в HTML-документе. Как это сделать — рассказывали выше в разделе «Как добавить CSS-файл в HTML-документ».

При загрузке страницы

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

Для начала автор создает в HTML три контейнера для анимации после тега <body>: .preloader, .preloader_row и .preloader_item:

<div class="preloader">

       <div class="preloader__row">

            <div class="preloader__item"></div>

            <div class="preloader__item"></div>

      </div>

</div> 

Далее нужно настроить параметры для каждого контейнера в CSS-файле: координаты, анимацию, порядок кадров keyframes. 

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

Анимация фона

С помощью CSS можно анимировать фон страницы. Например, как описано на ресурсе Atuin:

Создаем в HTML-документе контейнер для фона. Текст поверх фона можно написать любой:

<div class="bg-animation">

       Анимация графического фона на CSS

</div>

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

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

При наведении курсора

Чтобы запустить анимацию при наведении курсора на объект, нужна команда hover.

В примере: 

1. Создаем в HTML кнопку с текстом «Пример ховера», которая должна поменять свое состояние при наведении курсора. Для этого нужна команда:

<button>Пример ховера</button>

2. В CSS-файле задаем параметры кнопки: границы, цвет, размер шрифта:

button {

       border: none;

       background: #3a7999;

       color: #80A6FF;

       padding: 10px;

       font-size: 20px;

       border-radius: 5px;

       position: relative;

       box-sizing: border-box;

       transition: all 400ms ease; 

}

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

button:hover {

       background: rgba(0.7,0.7,0.7,0.7);

       color: #00bfff;

       box-shadow: inset 0 0 0 3px #00000;

}

Попробуйте настроить эффект сами.

Исчезновение и появление

Разберемся на примере прямоугольника, как настроить плавное появление или исчезновение объекта:

1. Пишем в HTML команду для создания прямоугольника:

<div id="rectangle"></div>

2. В CSS-файле задаем параметры прямоугольника — размеры, цвет и анимацию:

#rectangle{

       width:200px;

       height:100px;

       background:blue;

       animation: myAnim 1s ease 0s infinite normal forwards;

}

В строке animation выставлена длина анимации в 1 секунду и бесконечное повторение — infinite. Вместо infinite можно цифрами задать нужное число повторов. Например, 25.

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

@keyframes myAnim {

       0% {

              opacity: 1;

       }

       100% {

              opacity: 0;

       }

}

4. Чтобы прямоугольник не исчезал, а появлялся, нужно просто поменять местами параметры прозрачности в последнем шаге. Для этого в первом параметре opacity пишем 0, а во втором — 1:

keyframes myAnim {

       0% {

              opacity: 0;

       }

       100% {

              opacity: 1;

       }

}

Попробуйте поменять параметры прозрачности самостоятельно.

Появление текста

Чтобы создать эффект появления текста, создаем класс с текстом в HTML-документе:

1. В HTML пишем <p class="text-typing">Пример появления текста</p>

2. Далее в CSS-файле настроим этот класс. Нужно прописать ширину блока, цвет, размер и шрифт текста. Также добавляем параметры анимации (5 секунд, выполнить за 50 шагов).

Командами white-space:nowrap и overflow:hidden прячем текст до срабатывания анимации:

.text-typing

{

       width: 40em;

       color:blue;

       font-size: 22px;

       font-family: 'Arial';

       white-space:nowrap;

       overflow:hidden;

       animation: type 5s steps(50, end) 1;

}

3. Добавляем @keyframes для запуска анимации:

@keyframes type{

       from { width: 0; }

}

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

Cмена картинок

Первым делом добавляем в HTML класс, в котором прописываем адреса нужных картинок:

<div class="fadein">

       <img src="здесь вписываем URL первой картинки">

       <img src="здесь вписываем URL второй картинки">

       <img src="здесь вписываем URL третьей картинки">

</div>

В CSS прописываем параметры анимации: изменения по кадрам keyframes, длительность, количество повторов и эффекты. Пример кода — на ресурсе Zornet.

Попробовать разные настройки анимации и посмотреть результат можно здесь.

Движение

Анимация движения особенная — при движении объект должен изменяться внешне. Например, вытягиваться вверх при прыжке.

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

Посмотреть код в действии и изменить параметры можно здесь.

При скролле

Анимацию при скролле проще построить в связке CSS и JS. Самый простой способ:

1. Выбрать нужную анимацию из готовых пресетов и скачать архив со всеми инструментами для ее настройки.
2. Добавить animate.css из архива в таблицу стилей сайта.
3. Задать класс элементу, который нужно анимировать. Название класса = название анимации из первого шага.
4. Чтобы анимация срабатывала во время скролла, добавляем wow.js из архива в JS-папку сайта.

Пошагово с подробными примерами процесс описан на ресурсе Smartlanding.

Вывод

Основной принцип создания CSS-анимации — создать объект или контейнер в HTML и присвоить ему CSS-стили. Стили описывают внешний вид объекта, запускают анимацию и придают эффекты.

Чтобы стили заработали, нужно прописать их в отдельном CSS-файле, который привязывается к HTML-документу с помощью строчки кода. Это базовая механика работы с CSS. Чтобы реализовать сложные решения, где можно контролировать анимацию в процессе воспроизведения, потребуется связка CSS и JS.

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

Читайте также:

   

• Основные блоки и элементы сайта — для чего нужны и как правильно оформить
• Как научиться читать код сайта и зачем это нужно, если вы не программист
• Как оптимизировать картинки для сайта