Здравствуйте!

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

недостаточно, когда нужно добавить какие-то промежуточные изменения.

Например, хочется передвинуть объект сначала вверх, потом вправо, потом вниз,

потом влево.

С обычными переходами это сделать не получится.

Поэтому и придумали так называемые CSS-анимации.

CSS-анимации позволяют анимировать переходы между ключевыми кадрами.

Для создания анимаций необходимо определить ключевые кадры,

которые содержат свойства: возможно, это промежуточные значения, возможно,

это какие-то новые свойства, и применить анимацию к элементу.

Для того чтобы создать CSS-анимацию,

нужно создать add-правило keyframes и задать ему какое-то название —

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

Ключевые кадры имеют название, например,

from и to, то есть начальный набор свойств и конечный набор свойств.

Рассмотрим пример.

Мы хотим, чтобы у нас анимировалась прозрачность.

Для этого мы подключаем свойство animation-name,

которое ссылается на add-правило, называем его show и

добавляем длительность анимации — в данном случае это две секунды.

Указываем в качестве первого ключевого кадра прозрачность 0 и в

качестве конечного ключевого кадра прозрачность 1.

И когда мы включаем анимацию,

то элемент резко становится прозрачным и плавно переходит к непрозрачному.

Как избежать того,

чтобы элемент сначала был прозрачным и плавно переходил к непрозрачному?

Для этого мы элементу задаем свойство opacity 0,

то есть по умолчанию элемент прозрачный.

Добавляем анимацию, animation-name, называем show и добавляем

длительность — две секунды, и мы не указываем начальный кадр,

указываем только лишь конечный, пишем to и указываем свойство opacity 1.

Когда применяем анимацию, то элемент плавно показывается,

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

то есть он снова становится прозрачным.

О том, как этого избежать, я расскажу чуть позже.

Одну и ту же анимацию можно применять сразу к нескольким объектам.

Например, мы хотим к боксу 1 и боксу 2 применить одну и ту же анимацию,

но с разной длительностью.

Для этого мы указываем одно и то же свойство animation-name,

но указываем разные свойства animation-duration,

где указываем: у первого — одна секунда, у второго — пять секунд.

И анимация следующая: то есть мы переходим от синего цвета к зеленому.

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

от синего к зеленому, причем переход от серого к синему очень резкий.

У второго бокса анимация намного плавнее, потому что длительность ее пять секунд.

До этого все примеры были основаны на двух ключевых кадрах: from и to,

и сразу возникает вопрос: а чем это отличается от transition?

Так вот, в анимациях можно указывать промежуточные значения.

Например, мы хотим поменять цвет сначала с синего на красный,

а затем с красного на зеленый.

Мы указываем ключевой кадр from, указываем background-color: blue,

затем в середине, то есть 50 % всего прогресса,

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

То есть за две секунды у нас цвет меняется три раза: сначала меняется на синий,

затем на красный и на зеленый.

Вместо ключевых слов from и to можно указывать значение в процентах.

Вместо слова from можно писать 0 %, вместо ключевого слова to можно указывать 100 %.

В данном примере мы меняем цвет блока несколько раз: сначала он становится

синим, затем зеленым, красным, желтым и снова серым.

И все это происходит за три секунды, и выглядит это вот так.

Если есть ключевые кадры,

где установлено одно и то же свойство, например, мы точно знаем,

что в начале фон становится синим, в середине он снова становится синим,

тогда мы можем указать ключевые кадры через запятую, то есть 0 %, 50 %.

Ну и потом мы знаем, что где-то на 25 % и 75 % у нас цвет становится зеленым.

Мы также можем указать его через запятую.

И в этом случае эффект получается вот такой, но мы не дублируем ключевые кадры.

Также можно сделать эффект задержки.

То есть мы знаем, что в середине цвет должен оставаться зеленым.

К примеру, у нас блок окрашивается сначала в синий цвет,

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

В этом случае мы указываем через запятую два значения, например, 25 %,

75 %, то есть переход между 25 и 75 будет зеленым,

и создается эффект, что у нас блок как бы останавливается на этом переходе.

То есть на самом деле здесь просто не происходит никакой анимации,

поэтому создается ощущение паузы.

Как вы уже, наверное, поняли, анимировать можно сразу несколько свойств.

Итак, например, мы хотим анимировать прозрачность и цвет заднего фона.

В этом случае мы в начале указываем opacity: 0 и background color: blue.

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

красный и отключить прозрачность.

Посмотрим в браузере и увидим, что у нас opacity меняется плавно,

и цвет меняется также плавно, но несколько раз.

Также можно устанавливать задержку анимации.

В этом случае нужно воспользоваться свойством animation-delay,

значение задается в секундах или в миллисекундах.

Если мы включим в браузере, то увидим,

что анимация началась через секунду и закончилась через две секунды.

Посредине была пауза.

С чем это связано?

С тем, что у нас через запятую указаны 25 и 75 %.

То есть между двумя ключевыми кадрами нет никаких изменений,

поэтому элемент как бы задержался в этом месте.

По аналогии с переходами в анимации тоже можно задавать временную функцию.

Можно создавать свою при помощи кривой Безье, можно воспользоваться готовыми,

такими как linear, ease, ease-in, ease-out и так далее.

Можно временную функцию менять с течением анимации.

Для этого в некоторых ключевых кадрах мы можем указывать свойство

animation-timing-function и указывать значение.

Когда время придет к этому ключевому кадру, то эта функция поменяется.

Например, мы хотим в начале анимации использовать свою функцию,

далее — линейную, потом снова свою и снова линейную.

В браузере это будет выглядеть вот так: сначала используется наша,

потом происходит линейная, снова наша и снова линейная функция.

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

Для этого нужно задать свойству animation-iteration-count

количество повторений.

В данном случае три повторения.

При наведении у нас кнопка увеличивается, и это будет выполнено три раза,

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

В браузере это выглядит вот так: то есть увеличивается кнопка,

перескакивает в начальное состояние и так три раза.

Для того чтобы задать бесконечное количество повторений нужно

воспользоваться ключевым словом infinite.

Хороший пример — это часы.

Секундная стрелка делает оборот за 60 секунд,

далее анимацию просто нужно повторить.

Для этого мы указываем свойство animation-iteration-count со значением

infinite.

Из предыдущих примеров видно, что между повторениями происходят скачки.

Чтобы этого избежать, можно воспользоваться свойством

animation-direction со значением alternate.

В этом случае, когда анимация закончится,

она вернется к начальному состоянию тем же путем, то есть плавно,

но в этом случае счетчик количества итераций будет увеличиваться.

Например, у нас кнопка увеличивается три раза.

В этом случае три раза это будет: увеличение, уменьшение и увеличение,

после чего произойдет скачок к начальному состоянию.

Увеличение, уменьшение, увеличение, и скачок к начальному состоянию.

Как избежать скачков после завершения анимации?

Для этого можно воспользоваться свойством animation-fill-mode со значением forwards,

то есть когда у нас анимация заканчивается,

то она застывает в конечном состоянии.

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

Так вот, на самом деле существует более короткая запись: нужно использовать просто

свойство animation и через пробел указать все свойства в таком порядке,

как указано на экране.

Первое значение в секундах — это длительность анимации,

а последнее — это задержка анимации.

Также можно указать сразу несколько анимаций.

Для этого нужно через запятую указать набор свойств.

CSS-анимациями можно управлять.

При помощи свойства animation-play-state можно поставить анимацию на паузу.

К примеру, мы хотим при наведению на элемент остановить его.

Воспользуемся свойством animation-play-state со значением paused

при наведении мыши, то есть псевдоклассом hover.

И, как мы видим, анимация остановилась.

В этом видео вы узнали, как работают CSS-анимации,

и в следующем видео я разберу несколько практических примеров.

Анимации

Основы HTML и CSS

Rencontrer les enseignants