Основа CSS-анимации

Содержание:

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

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

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

Что это такое

CSS Animations – это метод изменения внешнего вида web-страниц и поведения разных частей на странице.

Анимация используется для управления частями с помощью изменения движений и отображения в браузере. Этот метод:

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

Создание анимации базируется на @keyframes (ключевые кадры). Они позволяют делать автоматическое воспроизведение и повторение эффектов на протяжении установленного времени, а также остановку анимации по выбранным событиям.

Подробный разбор

Разберем подробнее 2 части метода, которые мы рассматривали выше.

Ключевые кадры (@keyframes)

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

Кейфреймы имеют:

  • имя анимации. Делает описание анимации, как пример – bounceIn;
  • этапы анимации. Отображаются в процентах, где 0 % – это начальное состояние анимации, а 100 % – финальное состояние. Между ними разрешено вставить еще 98 этапов;
  • свойства CSS. Определяются для любого момента шкалы времени.

Сделаем легкий кейфрейм, назовем его bounceIn. Он разделен на 3 этапа:

  1. 0 %. Элемент имеет прозрачное состояние и может масштабироваться до 10 % размера по умолчанию. Применяется CSS- для трансформации масштаба (transform: scale (0.1)).
  2. 60 %. Элемент становится видимым. Происходит увеличение до 120 % по умолчанию.
  3. 100 %. Элемент делает возврат к своему стандартному размеру.

Ниже показана наглядная схема этих 3 этапов:

Основа CSS-анимации

Свойства анимаций

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

Для запуска добавляем 2 свойства:

  • Animation name – название анимации. Они определены в кейфреймах.
  • Animation duration – период действия анимации в секундах или в миллисекундах.

Возьмем снова ключевой кадр bounceIn. Делаем анимацию одного из div’ов на web-странице:

Основа CSS-анимации

Этот div можно написать в короткой форме:

Основа CSS-анимации

Кроссбраузерность CSS-анимации

Как и раньше, большинство Webkit-браузеров требуют применять префиксы webkit для @keyframes и свойств анимаций:

Основа CSS-анимации

Для упрощения работы с префиксами можно использовать Bourbon:

Основа CSS-анимации

Создаем простую анимацию

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

Программист может добавить путевые точки по своему усмотрению.

В качестве наглядного примера возьмем движущийся круг:

Основа CSS-анимации

Определение анимации происходит с помощью свойства animation. Движение определяется с помощью keyframe таким способом:

Основа CSS-анимации

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

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

Подсвойства

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

Вот они:

  • Animation – name. Мы рассматривали его выше. Он указывает имя правила ключевых кадров, которые описывают ключевые кадры анимации.
  • Animation – duration. Делает закрепление временного промежутка, который анимация производит до завершения времени.
  • Animation – timing – function. Высчитывает время действия анимации.
  • Animation – delay. Ставит временную задержку между началом анимации и временем загрузки фрагмента.
  • Animation – direction. Выставляет направление движения.
  • Animation – iteration – count. Выставляет число повторений анимации. Можно задавать определенное или бесконечное число повторений.
  • Animation – fill – mode. Выставляет значения, используемые до начала и после проигрывания анимации.
  • Animation – play – state. Позволяет останавливать и возобновлять анимационную последовательность.

Префиксы

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

Если программисту нужна поддержка старых версий браузеров, то здесь уже надо иметь необходимые префиксы. Например, такие:

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

Взаимодействие с несколькими анимированными элементами

Анимации можно объявлять в селекторе. Для этого необходимо указывать их значение через запятую.

Ниже показан пример того, как устанавливается цвет для замены с использованием правила @keyframes, делая его движение из стороны в сторону с помощью другого ключевого кадра:

Вопросы – Ответы

Ответим на самые популярные вопросы.

Какие можно делать анимации в CSS?

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

Анимации не исчезают с сайта после хакерской атаки?

Нет. Если хакер их не удалил специально, то они останутся до тех пор, пока сайт функционирует.

Обязательно задавать границы во время создания анимации?

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

Заключение

Мы рассмотрели основы CSS-анимации. Этой информации вполне достаточно, чтобы сделать свою простенькую анимацию.

Давайте еще раз вспомним, что мы прошли в статье:

  • узнали, что такое CSS;
  • провели подробный разбор 2 методов;
  • узнали о кроссбраузерности анимации;
  • создали простую анимацию;
  • рассмотрели подсвойства;
  • рассмотрели префиксы;
  • узнали о том, как делать взаимодействие с несколькими анимированными элементами;
  • ответили на популярные вопросы.

Пользуйтесь советами и делайте анимации на своем сайте.

Если вы хотите научиться более углубленному программированию, приглашаем вас на курс по FrontEnd-разработке.

Вы научитесь:

  • работать с кодом любой сложности;
  • писать интернет-приложения;
  • делать профессиональную верстку сайта;
  • создавать программы для бытовой техники.

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

Немного информации о курсе:

Длительность курса

2 месяца

Количество занятий в неделю

5

Длительность 1 занятия

4 часа

Начало практики

С 1-го занятия и до конца

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

Поторопитесь записаться на курс! Количество мест ограничено.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!