Знакомство с анимацией в css3: гайд для начинающих

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

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

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

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

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

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

В общем вот вещи, которые наиболее хорошо подходят для анимации:

Позиционирование на странице
Масштабирование
Вращение
Прозрачность

Причем, первые три пункта этого списка, это все параметры свойства transform (translate, scale, rotate). Позиционирование происходит по осям X и Y.

А это именно то, что нас интересует, когда мы говорим о производительности анимации. В общем, самые подходящие свойства для анимации это transform и
opacity
. При анимировании чего либо другого, fps анимации может упасть гораздо ниже 60fps.

Давайте резюмируем этот пункт следующим. Старайтесь избегать перерисовки элементов на веб странице и анимации элементов, которые браузеру сложно отрендерить (например, тени).

Способ №2. Как анимировать объекты в презентации с помощью видеоредактора

Если вы создаете видеопрезентации, вполне логично обратить внимание не на PowerPoint, а профессиональный видеософт с функциями анимации. В ВидеоШОУ вы не только можете вставить видео в презентацию, но также создать пользовательский шаблон, полностью контролируя то, как он будет отображаться

С его помощью можно:

Собственноручно настраивать движение объектов в нужном направлении;
Создавать множество слоев со спецэффектами и фильтрами;
Накладывать друг на друга разные типы медиа, настраивая параметры для каждого отдельного элемента;
Вставлять и анимировать любой тип медиа: изображения, видео, фигуры, текст и пр.;
Запланировать автоматический запуск, вручную указав старт и окончание действия.

Хотите иметь эти возможности? Скачайте программу ВидеоШОУ и следуйте инструкции!

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

Появление нескольких картинок на слайде по очереди

В этом примере мы покажем, как сделать, чтобы в презентации картинки появлялись по очереди. Для начала запустите ВидеоШОУ и выберите пункт «Новый проект». В боковом столбце слева выделите папку, в которой хранятся материалы для презентации, и перетяните на таймлайн фотографию или видеофайл для фона. Вы также можете встроить в проект пустой слайд – для этого щелкните правой кнопкой по временной шкале и выберите соответствующий пункт.

Создаем проект в программе ВидеоШОУ

В ВидеоШОУ можно вручную регулировать длительность отображения каждого кадра. Чтобы сделать это, нажмите на иконку в виде шестеренки над таймлайном и укажите длину показа в поле «Длительность».

Регулируйте длительность каждого кадра самостоятельно

После этого кликните «Редактировать слайд» в окне превью. Нажмите кнопку «Добавить слой» и выберите пункт «Фотографию». Программа позволяет также вставлять видеоклипы и анимированные гифки.

Вставляйте любые графические объекты для украшения слайда

Чтобы анимировать изображение, перейдите в соответствующую вкладку. В поле «Тип анимации» выберите подходящий вариант. Чтобы отрегулировать появление первого фото, выделите его и найдите блок «Общие параметры».

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

Плавное появление и исчезание не напрягает глаз и привлекает внимание

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

Положение отвечает за то, где расположен элемент на момент начала и конца движения. Если вы хотите, чтобы картинка «выскакивала» из-за границ, как в примере с Power Point, измените на первом ключевом кадре ее положение так, чтобы она находилась за левой границей фона, на втором «ключе» — за правой.
Масштаб можно использовать, чтобы создать постепенное увеличение или уменьшение.
3D поворот позволяет создать вращения объекта.

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

Пример последовательного появления изображений на слайде

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

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

Текст — неотъемлемая часть презентации

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

Анимация делает готовый слайд гораздо привлекательнее

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

Примеры анимации CSS3 посложнее

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

3 урока по анимации CSS (преобразования)

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

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

Укажите кривую скорости анимации

Свойство определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

— Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
— Задает анимацию с одинаковой скоростью от начала до конца
— Задает анимацию с медленным запуском
— Задает анимацию с медленным концом
— Задает анимацию с медленным началом и концом
— Позволяет определить собственные значения в функции кубической Безье

В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:

Пример

#div1 {animation-timing-function: linear;}#div2
{animation-timing-function: ease;}#div3 {animation-timing-function:
ease-in;}#div4 {animation-timing-function: ease-out;}#div5
{animation-timing-function: ease-in-out;}

Послесловие

Мы рассмотрели все, что нам нужно для создания анимации на чистом CSS. Совсем скоро мы разберем практические примеры, а чуть позже – очень интересные примеры.

Вы дочитали до самого конца?

Была ли эта статься полезной?

Да
Нет

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

Использование функций замедления

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

Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).

Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:

Этой функции соответствует следующий график:

Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).

Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:

Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.

В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier:

Стандартные значения функций кривых Безье, используемые в свойстве transition-timing-function
Значение	Функция cubic-bezier()	Описание
linear	0, 0, 1, 1	Немедленный старт и остановка, анимация происходит с постоянной скоростью
easy	0.25, 0.1, 0.25, 1	Быстрый старт и быстрое ускорение, медленный переход с замедлением в конце
ease-in	0.42, 0, 1, 1	Медленный старт с нарастающим ускорением и резкой остановкой в конце
ease-out	0, 0, 0.58, 1	Обычный старт с замедлением в конце
ease-in-out	0.42, 0, 0.58, 1	Медленный старт с небольшим ускорением, скорость перехода постоянная, в конце происходит замедление

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

motion-path;
motion-offset;
motion-rotation;

motion-path
— это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

Motion-path: path(«M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z»);

motion-offset
— это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

@keyframes airplane-fly {
0% { motion-offset: 0; }
100% { motion-offset: 100%; }
}

motion-rotation
— это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах («-45deg», «30deg» и т.д).

Motion-rotation: auto;

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before

и :after

Поддержка браузерами

IE:
10.0Firefox:
16.0, 5.0 -moz-Chrome:
43.0, 4.0 -webkit-Safari:
4.0 -webkit-Opera:
12.1, 12.0 -o-iOS Safari:
9, 7.1 -webkit-Opera Mini:
—Android Browser:
44, 4.1 -webkit-Chrome for Android:
44

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

Создать саму анимацию c помощью ключевого слова @keyframes
Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Свойство CSS transition – параметры и значения

Синтаксис

Для начала, давайте посмотрим, как читается это свойство, и разберем его синтаксис. Мы пишем это свойство примерно так:

Мы присваиваем это свойство тому элементу, который мы хотим анимировать. Этот элемент получает плавный переход
(или пошаговый) между несколькими своими состояниями (например, высота 100 пикселей и высота 200 пикселей). И то, как будет выглядеть этот переход
(с англ. transition), будет зависеть от параметров, которые мы ему зададим.

Первым параметром (значением) свойства transition является другое свойство
анимируемого элемента (например, height
).

Вторым параметром является длительность (продолжительность) анимации, то есть, сколько времени займет переход элемента из одного состояния в другое (например, 2s или 2000ms).

Третий параметр – это тайминг функция
[timing
function
] (изинг функция [easing
function
]). То, как интенсивность анимации распределится на протяжении всего времени. Например, анимация может резко начаться, а под конец замедлиться и плавно закончить переход. Могут использоваться как ключевые слова (например, ease,
ease-
in-
out,
linear
), так и функции кубика Безье (например, cubic-
bezier(0.17, 0.67, 0.83, 0.67)
). Кубик Безье вы можете легко и удобно настраивать на этом ресурсе http://cubic-bezier.com , а также функция steps для того, чтобы создать покадровую анимацию (пошаговую).

Ну и наконец, параметр задержка
. Задержка анимации – это время, которое необходимо подождать, прежде чем анимация (в нашем случае — переход) начнется.

Пример анимации CSS transition

Давайте рассмотрим такой пример CSS анимации:

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

Вместо конкретного свойства можно использовать также ключевое слово «all
». Это означает, что мы анимируем абсолютно все свойства элемента, которые были изменены в новом состоянии элемента (а не только opacity), и которые вообще можно анимировать. Потому что, как вам известно, не все свойства можно анимировать. Но об этом немного позже.

Второй параметр (300
ms
) говорит нам о том, что анимация продлится всего 300 миллисекунд. То есть элемент быстро появится или быстро растворится, в зависимости от значений свойств в двух его состояниях.

Тайминг функция (ease-
in-
out
) третьим параметром сделает начало и конец анимации более плавными.

Задержка (1
s
) показывает на сколько должна опоздать анимации перед ее срабатыванием.

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

Как анимировать?

В CSS есть два основных инструмента при помощи которых мы можем перемещать элементы по веб-странице. Первый (о котором мы еще поговорим сегодня) – свойство transition
. В первую очередь именно с его помощью мы создаем анимации в CSS. Второй инструмент – это свойство animation в паре с кейфреймами
(@keyframes – ключевые кадры). Этот инструмент мы более подробно остановимся в следующем уроке, а прямо сейчас мы рассмотрим свойство CSS transition. И еще потом мы поговорим о том, что нужно анимировать на странице (когда это нужно пользователю), а что не стоит анимировать (когда анимация выглядит тупо и неуместно), основываясь на пользовательском опыте (UX — user experience).

CSS 3D Animation

CSS 3D-анимация – обычно называемая 3D-преобразованием – открывает новую сферу графического дизайна. С помощью трехмерных преобразований интерфейсные разработчики могут добавить новое измерение к традиционным веб-сайтам, чтобы улучшить их дизайн.

Например, рассмотрим функцию перевода. Translate перемещает элемент из точки A в B. В 2D вы можете использовать translate для перемещения элемента по горизонтальной оси X или вертикальной оси Y. В приведенном ниже примере черный шар перемещается по оси X.

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

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

Временная функция

Свойство animation-timing-function

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

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

На данный момент существует несколько уже встроенных аргументов для этого правила: ease

, ease-in

, ease-out

, ease-in-out

, linear

, step-start

, step-end

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps

(количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start

или end

.

ease

— функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear

— анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
ease-in

— анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
ease-out

— анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
ease-in-out

— анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2)

— см.выше.
inherit

— наследует это свойство от родительского элемента.

Визуальное сравнение

Работа с @keyframes уровня бог:

Вот тут уже разберём кое что интересное.

Профессиональный пример работы с @keyframes:

Тут почти не чего не поминалось, а HTML вообще не поменялся.

Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.square{

width100px;

height100px;

background-colorblue;

animation-duration5s,10s;

animation-iteration-countinfinite;

animation-directionalternate;

animation-timing-functionlinear,ease-in-out;

animation-namesquareSize,squareColor;

}

@keyframessquareSize{

90%{

width200px;

}

to{

width500px;

height150px;

}

@keyframessquareColor{

25%{

background-colorred;

}

75%{

background-colorblue;

}

to{

background-colorgreen;

}

Разбор кода:

Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.

Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.

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

и неважно сколько у вас этих анимаций, но если только один параметр у свойство задан, то он будет применяться для всех анимаций

Как сделать анимацию в CSS?

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

Это не сложно и для этого есть много разных способов. Но есть 2 основных, которые вы должны освоить в обязательном порядке. Первый способ – это анимация при наведении на элемент
(псевдокласс:hover). Вы наводите курсор мыши на элемент, и срабатывает анимация. Таким образом можно анимировать сам элемент или любой из его дочерних элементов. Потом я покажу вам, как это работает. Второй способ – это изменение класса элемента
. То есть у вас есть обычный элемент, вы меняете (или добавляете) его класс на класс, который имеет совсем другие стили. Если добавить класс произойдет анимация, и если убрать класс, произойдет обратная анимация. Это хороший способ для анимирования меню или выпадающих списков.

Функция плавности вывода анимируемых кадров

Свойство `animation-timing-function` позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Стоит учесть, что по умолчанию анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас существуют следующие предопределённые значения: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end.`

Однако вы можете создавать такие функции самостоятельно. Значение `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` принимает на вход 4 аргумента и строит кривую распределения процесса анимации. Попрактиковаться в создании этих функций можно и matthewlein.com.

И, наконец, анимацию можно разбить на набор дискретных значений при помощи функции `steps (amount of steps, direction)`, которая принимает на вход количество шагов и направление (`start` или `end`). В следующем примере анимация состоит из 7 шагов, последний из которых произойдёт прямо перед завершением анимации:

See the Pen Direction of animation within time by Dash Bouquet (@dashbouquetdevelopment) on CodePen.