УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Анимация CSS3. Создание баннеров

Авторы учебного курса:
Арефьева Анастасия Александровна,
студентка гр. ЗКТ-402С РГППУ, выпуск 2019 г.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ




Теория CSS3 анимации

Цель: Изучить базовые сведения об анимации CSS

Задачи:

  1. Узнать для чего нужна анимация веб-страниц.
  2. Узнать какие свойства можно анимировать, а какие нельзя.

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

Что можно анимировать в CSS?

Давайте поговорим о свойствах, какие из них мы можем анимировать, а какие нет. Потому что есть некоторые вещи, которые просто не имеет смысла анимировать, а некоторые свойства анимировать просто невозможно.

Анимируемые свойства

Взять, к примеру, такие свойства, как:

  • font-size;
  • background-color;
  • width; left (на какое расстояние от левой стороны элемент может быть перемещен [спозиционирован].

Очевидно, анимировать эти свойства имеет смысл. Если вы измените их значения, это изменит элемент визуально. Если вы измените размер шрифта, скажем, с 14 до 28 пикселей, вы увидите, что шрифт плавно увеличился, произошла анимация, которая длилась какое-то время. Анимация всегда имеет смысл, если значение свойств это четкие (чаще всего числовые) значения. Если вы увеличите размер шрифта до 100 пикселей, то вы явно увидите, как буквы растут. Плавное изменение цвета фона также можно пронаблюдать [потому что цвет в вебе имеет числовой код, например, красный rgb(255,0,0)]. Эти свойства являются анимируемыми. Вообще запомните, если вы представить, что это анимируется – значит это можно анимировать. Чаще всего это работает.

Не анимируемые свойства

А вот список свойств, которые нельзя анимировать (пример):

  • display;
  • font-family;
  • position.

Это некоторые из них, которые я взяла в качестве примера для того, чтобы вы могли почувствовать разницу между анимируемыми и не анимируемыми свойствами CSS. Возьмем display. Можете ли вы представить, как визуально будет происходить изменение между «display: block;» и «display: inline-block;»? Как может плавно измениться внешний вид элемента между «position: relative;» и «position: absolute;»? Нет, конечно же, элемент будет выглядеть иначе при изменении этих свойств. Но как вы можете представить себе переход? Вы не можете этого сделать. Верно? Вы не можете представить себе превращение шрифта Helvetica в шрифт Georgia, каждой буквы, это просто не сработает. Вы можете изменить эти шрифты, но они резко изменятся, никакой анимации не произойдет.

Чтобы использовать анимацию в проекте, нужно сделать две вещи:

  • создать анимацию;
  • связать её с анимируемым элементом и указать нужные свойства.

Анимация – это набор ключевых кадров, или кейфреймов, хранящихся в CSS:

	@keyframes test-animation {
    0% {
        width: 50px;
    }
    100% {
        width: 150px;
    }
}
	

Давайте разберёмся что мы здесь видим. Ключевое слово @keyframes указывает на саму анимацию. Далее идет её имя, в данном случае test-animation. В фигурных скобках находится список ключевых кадров. В данном случае это начальный кадр 0% и конечный кадр 100%. Также начальный и конечный кадры можно записать ключевыми словами from и to. Теперь посмотрите на следующий код. Так тоже можно написать:

	@keyframes test-animation {
    from {
        width: 50px;
    }
    30% {
        width: 99px;
    }
    60.8% {
        width: 120px;
    }
    to {
        width: 150px;
    }
}

Обратите внимание, если не задан начальный (from, 0%) или конечный (to, 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

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

.element {
    animation-name: current-anim-name;
    animation-duration: 2s;
}

В правиле animation-name задаётся имя созданной вами анимации @keyframes . Правило animation-duration указывает сколько секунд анимация будет воспроизводиться. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms).

Задержка анимации

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах:

    .element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 5s; // Перед стартом этой анимации пройдет 5 сек.
}
	

Контрольные вопросы:

  1. Для чего нужна анимация?
  2. Можно ли анимировать свойство background-color;?
  3. Можно ли анимировать свойство font-family;?
  4. Что нужно сделать для использования анимации в проекте?
  5. На что указывает ключевое слово @keyframes?