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

CSS-анимации

Большой набор свойств для создания настоящих живых анимаций.

Время чтения: 13 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. @keyframes
3. animation-name
4. animation-duration
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
   1. linear
   2. ease
   3. ease-in
   4. ease-out
   5. ease-in-out
   6. cubic-bezier(x1, y1, x2, y2)
   7. step-start
   8. step-end
   9. steps(количество шагов, положение шага)

   Контрибьюторы:

   • Светлана Коробцева ,
   • Антон Капустинский

   Обновлено 28 августа 2023

   Кратко

   Скопировать ссылку «Кратко» Скопировано

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

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

    .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in;> .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

   Анимация стала более естественной, не такой компьютерной.

   Пришло время заняться правой фигурой и превратить синий квадрат в розовый круг. Используем практически те же самые свойства, что и для круга, только зададим другое значение для свойства animation — direction , чтобы шаги анимации воспроизводились в обратном порядке:

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

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

   animation — delay

   Скопировать ссылку «animation-delay» Скопировано

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

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

   Пусть анимация правого элемента начнётся с задержкой -2.5 секунды. Так она будет начинаться с середины:

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s; >    Скопировать Скопировано Не удалось скопировать   

   animation — play — state

   Скопировать ссылку «animation-play-state» Скопировано

   Свойство, позволяющее ставить анимацию на паузу и запускать снова.

   • running — анимация проигрывается (значение по умолчанию).
   • paused — анимация ставится на паузу. При повторном запуске анимации она продолжается с того места, где была остановлена.

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

    .child:hover  animation-play-state: paused;> .child:hover  animation-play-state: paused; >    Скопировать Скопировано Не удалось скопировать   

   animation — fill — mode

   Скопировать ссылку «animation-fill-mode» Скопировано

   Последнее свойство анимации — animation — fill — mode — сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.

   • none — стили анимации не применяются до и после проигрывания анимации (значение по умолчанию).
   • forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
   • backwards — после окончания анимации к элементу будут применены стили первого ключевого кадра.
   • both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

   Для лучшего понимания работы этих значений посмотрите демо ��

   animation

   Скопировать ссылку «animation» Скопировано

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

   Значения указываются через пробел. Порядок указания значений не важен. Из-за того, что значения этих свойств очень разные, браузер сам догадывается, какое значение к какому свойству относится. Важно только помнить, что первое значение времени будет воспринято как значение animation — duration (длительность анимации), а второе — animation — delay (задержка воспроизведения).

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

    .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s;> .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s; >    Скопировать Скопировано Не удалось скопировать   

   Несколько анимаций

   Скопировать ссылку «Несколько анимаций» Скопировано

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

   Например, разобьём предыдущую анимацию на две отдельные. Одна будет отвечать за изменение формы элемента, а вторая за изменение цвета.

    @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; >> @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; >> @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; > > @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; > >    Скопировать Скопировано Не удалось скопировать   

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

    .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite;> .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite; >    Скопировать Скопировано Не удалось скопировать   

   В итоге форма меняется за 10 секунд, а цвет перетекает из розового в синий за 5 секунд. А потом обратно. Очень красиво и медитативно ��

   Анимация в CSS

   Мы недавно видели, что переходы — это просто способ анимации стилевых свойств от исходного до конечного состояния.

   Итак, переходы в CSS являются специфическим видом анимации, где:

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

   Но что если вы хотите:

   • иметь контроль над промежуточными состояниями?
   • зациклить анимацию?
   • сделать разные виды анимаций для одного элемента?
   • анимировать определённое свойство только на половину пути?
   • имитировать различные функции времени для разных свойств?

   Анимация в CSS позволяет всё это, и не только.

   Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

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

   Как и transition , свойство animation является сокращённым для нескольких других:

   • animation-name : название анимации;
   • animation-duration : как долго длится анимация;
   • animation-timing-function : как вычисляются промежуточные состояния;
   • animation-delay : анимация начинается спустя некоторое время;
   • animation-iteration-count : сколько раз должна выполняться анимация;
   • animation-direction : должно движение идти в обратную сторону или нет;
   • animation-fill-mode : какие стили применяются до начала анимации и после её завершения.

   Быстрый пример

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

   @keyframes bouncing < 0% < bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); >100% < bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); >> .loading-button

   Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её bouncing . Затем вы можете использовать эту анимацию, применяя её к loading-button .

   Я использовал сокращенное свойство animation и включил все возможные варианты:

   • animation-name: bouncing (совпадает с названием ключевых кадров)
   • animation-duration: 0.5s (полсекунды)
   • animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
   • animation-delay: 0s (без задержки)
   • animation-iteration-count: infinite (воспроизводится бесконечно)
   • animation-direction: alternate (идёт назад и вперёд)
   • animation-fill-mode: both

   @keyframes

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

   • 0% — первый шаг анимации;
   • 50% — шаг на полпути в анимации;
   • 100% — последний шаг.

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

   Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

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

   Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием:

   @keyframes around < 0% < left: 0; top: 0; >25% < left: 240px; top: 0; >50% < left: 240px; top: 140px; >75% < left: 0; top: 140px; >100% < left: 0; top: 0; >> p

   Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

   animation-name

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

   • при написании анимации с помощью @keframes ;
   • при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).

   @keyframes whatever < /* . */ >.selector

   Подобно именам классов CSS, название анимации может включать в себя только:

   • буквы (a-z);
   • цифры (0-9);
   • подчёркивание (_);
   • дефис (-).

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

   animation-duration

   Как и длительность перехода, длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

   .selector

   Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

   animation-timing-function

   Подобно функциям времени для переходов, функции времени для анимации могут использовать ключевые слова, такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье.

   .selector

   Значение по умолчанию: ease .

   Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.

   animation-delay

   Как и с задержкой перехода, задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

   По умолчанию равно 0s, что означает отсутствие любой задержки.

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

   .a, .b, .c < animation: bouncing 1s; >.b < animation-delay: 0.25s; >.c

   animation-iteration-count

   По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:

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

   .selector

   animation-direction

   Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.

   • normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
   • reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
   • alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
   • alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.

   Это легче представить, если счётчик итераций анимации установлен как infinite .

   animation-fill-mode

   Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

   animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации.

   Давайте представим себе кнопку, которая является:

   Как создать сложную анимацию на CSS

   

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

   Мы ежедневно просматриваем веб-страницы, и как разработчики, склонны замечать тонкие детали на веб-сайте. При этом самое заметное, что сильнее всего привлекает внимание, это то, насколько плавны анимации. Анимация отлично подходит для того, чтобы оживить пользовательский интерфейс и дизайн сайта в общем. Так, можно создать интерактивный веб-сайт, который привлечет внимание посетителей и надолго останется у них в памяти.

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

   В этой статье вы узнаете:

   • Что такое кривые Безье, и как их можно использовать для создания «сложной» анимации всего в одной строке CSS;
   • Как объединять анимации, чтобы создать более сложную анимацию;
   • Как создать анимацию американских горок, используя изученный материал.

   Кривая Безье: Что это такое?

   Функция cubic-bezier в CSS — это функция плавности (easing), которая дает вам полный контроль над тем, как ваша анимация будет вести себя с течением времени. Вот официальное определение:

   Кубическая Безье — это тип функции плавности, определяемая четырьмя действительными числами, которые задают две контрольные точки P1 и P2 кубической кривой Безье, конечные точки P0 и P3 , которые зафиксированы в (0, 0) и (1, 1) соответственно. Координаты по оси х точек P1 и P2 ограничены диапазоном [0, 1].

   

   Но что такое функция плавности?

   ДАВАЙТЕ НАЧНЕМ С ЛИНЕЙНОЙ КРИВОЙ

   Представьте себе две точки P0 и P1 , где P0 — начальная точка анимации, а P1 — конечная. Теперь представьте другую точку, линейно перемещающуюся между этими двумя точками следующим образом:

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

   ДАЛЕЕ: КВАДРАТИЧНАЯ КРИВАЯ БЕЗЬЕ

   Теперь, представьте, что у вас есть три точки: P0 , P1 и P2 . Вы хотите, чтобы анимация двигалась от точки P0 в точку P2 . В этом случае P1 является контрольной точкой, которая управляет кривой анимации.

   

   Идея квадратичной кривой Безье заключается в следующем:

   1. Соедините воображаемыми линиями точки P0 и P1 и точки P1 и P2 (представлены серыми линиями).
   2. Точка Q0 перемещается по линии между точками P0 и P1 . В то же время точка Q1 перемещается по линии между точками P1 и P2 .
   3. Соедините воображаемой линией точки Q0 и Q1 (зеленая линия).
   4. В то время, как начинают двигаться точки Q0 и Q1 , вдоль зеленой линии начинает двигаться точка B . Путь, по которому проходит точка B , и есть путь анимации.

   Обратите внимание, что точки Q1, Q2 и B не движутся с одинаковой скоростью. Их движение должно начинаться одновременно и заканчиваться в одно и то же время. Таким образом, каждая точка движется с соответствующей скоростью в зависимости от длины линии, по которой она движется.

   НАКОНЕЦ: КУБИЧЕСКАЯ КРИВАЯ БЕЗЬЕ

   Кубическая кривая Безье состоит из 4 точек: P0 , P1 , P2 и P3 . Анимация начинается в точке P0 и заканчивается в точке P3 . Точки P1 и P2 — контрольные.

   

   Кубическая кривая Безье работает следующим образом:

   1. Нарисуйте воображаемые линии на отрезках (P0, P1), (P1, P2) и (P2, P3). Представлены серыми линиями.
   2. Точки Q0, Q1 и Q2 перемещаются по линиям (P0, P1), (P1, P2) и (P2, P3) соответственно.
   3. Нарисуйте воображаемые линии на отрезках (Q0, Q1) и (Q1, Q2). Зеленые линии.
   4. Точки R0 и R1 перемещаются по линиям (Q0, Q1) и (Q1, Q2) соответственно.
   5. Нарисуйте линию между точками R0 и R1. Синяя линия.
   6. Наконец, точка B перемещается вдоль линии, соединяющей точки R0 и R1. Это и есть путь анимации.

   Сложение анимаций

   Большие анимации с множеством этапов можно разбить на несколько мелких анимаций. Вы можете добиться этого, добавив CSS свойство задержки animation-delay . Вычислить задержку просто; нужно сложить длительность всех анимаций до той анимации, для которой вы рассчитываете задержку.

    animation: movePointLeft 4s linear forwards, movePointDown 3s linear forwards; 

   Здесь у нас есть две анимации: movePointLeft и movePointDown . Задержка анимации movePointLeft будет равна нулю, потому что это анимация, которая запускается первой. Задержка же анимации movePointDown составит четыре секунды, потому что столько длится анимацция movePointLeft .

   Таким образом, мы получаем следующие значения свойства animation-delay :

    animation-delay: 0s, 4s; 

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

    animation: x 4s linear forwards, y 4s linear forwards, jump 2s linear forwards; 

   Предположим, мы хотим, чтобы анимации x и y начинались одновременно. В этом случае задержка для этих двух анимаций будет равна нулю, в то время как задержка для анимации jump составит четыре секунды (а не восемь!).

    animation-delay: 0s, 0s, 4s; 

   Создание анимации американских горок

   Теперь, когда у нас есть все базовые знания, пора применить их на практике!

   ПОНИМАНИЕ АНИМАЦИИ

   Траектория американских горок состоит из трех частей:

   

   1. Скольжение (The sliding part),
   2. Петля (The loop part),
   3. И небольшая анимация горизонтального прохода между первыми двумя анимациями и в конце.

   ПОДГОТОВКА

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

   1. Добавьте следующий код в тело вашего нового HTML файла:

   2. Добавьте следующий код в ваш CSS файл:

    .cart

   Чтобы сделать анимацию адаптивной, мы будем использовать единицы ширины ( vw ) и высоты ( vh ) окна просмотра. Вы же можете использовать любые единицы измерения.

   СКОЛЬЖЕНИЕ

   Ту часть, в которой наш шар-тележка скользит вниз и вверх, можно реализовать с помощью функции cubic-bezier ! Анимация будет состоять из 2 частей, первая часть — анимация вдоль оси х , вторая — вдоль оси y . Анимация по оси х — это обычная линейная анимация по горизонтали. Определим ее ключевые кадры следующим образом:

    @keyframes x < to < left: 40vw; >> 

   Добавим ее в свойство animation в траектории шара:

    animation: x 4s linear forwards 

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

    @keyframes y < to < top: 29.99vh; >> 

   Теперь подумаем о функции cubic-bezier . Нам нужно, чтобы сначала шарик медленно двигался вправо, а затем, когда он соскальзывает вниз, покатился быстрее.

   

   • Медленное движение вправо означает, что P1 будет идти вдоль оси x . Таким образом, мы получаем позицию (V, 0) .
     • Нам нужно выбрать подходящее значение V , которое заставит наш шар медленно двигаться вправо, но не слишком далеко, чтобы он не прошел все пространство. В нашем случае значение 0.55 подходит лучше всего.
   • Для достижения эффекта скольжения вниз нам нужно переместить P2 вниз по оси y , т. е. задать отрицательное значение. Таким образом, P2 = (X, -Y) .
     • Y должно иметь большое значение. В данном случае мы выбрали Y=5000 .
     • Что касается X . Мы знаем, что скорость анимации должна быть выше при скольжении вниз и медленнее при подъеме. Таким образом, чем ближе X к нулю, тем будет круче угол анимация при скольжении вниз. В данном случае зададим X = 0.8 .

   Теперь мы можем задать функцию cubic-bezier . Она будет cubic-bezier(0.55, 0, 0.2, -800) .

   Давайте добавим ключевые кадры в наше свойство animation :

    animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards; 

   Это первая часть нашей анимации, поэтому задержка равна нулю. При этом в любом случае мы должны добавить свойство animation-delay , так как, последующие анимации браузер будет запускать в другое время, чем начинается первая анимация.

    animation-delay: 0s, 0s; 

   ДОБАВЛЯЕМ ГОРИЗОНТАЛЬНЫЙ ПРОХОД

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

   Определим ключевые кадры:

    @keyframes x2 < to < left: 50vw; >> 

   Добавим это в свойство animation :

    animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards; 

   Эта анимация должна начинаться после анимации скольжения, а анимация скольжения занимает четыре секунды; таким образом, задержка составит четыре секунды:

    animation-delay: 0s, 0s, 4s; 

   ПЕТЛЯ

   Чтобы в CSS создать круг (петлю), нам нужно переместить круг в центр петли и запустить анимацию оттуда. Мы хотим, чтобы радиус окружности был 100px, поэтому мы изменим положение окружности на top: 20vh (30 — желаемый радиус (здесь 10vh)). Однако это должно произойти после завершения анимации скольжения, поэтому мы создадим другую анимацию с нулевой продолжительностью и добавим подходящую задержку.

   Создаем ключевые кадры:

    @keyframes pointOfCircle < to < top: 20vh; >> 

   Добавляем в список анимаций с продолжительностью 0s:

    animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards; 

   Добавляем задержку, которая должна составлять 4.5s:

    animation-delay: 0s, 0s, 4s, 4.5s; 

   Сама петля

   Чтобы создать анимацию петли:

   Создаем ключевой кадр, который перемещает шар обратно на старое положение, а затем поворачивает его:

    @keyframes loop < from < transform: rotate(0deg) translateY(10vh) rotate(0deg); >to < transform: rotate(-360deg) translateY(10vh) rotate(360deg); >> 

   Добавляем анимацию в свойство animation :

    animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards, loop 3s linear forwards; 

   Добавляем задержку, которая также должна составлять 4.5s:

    animation-delay: 0s, 0s, 4s, 4.5s, 4.5s; 

   ДОБАВЛЯЕМ ГОРИЗОНТАЛЬНЫЙ ПРОХОД (ЕЩЕ РАЗ)

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

   Добавляем ключевые кадры:

    @keyframes x3 < to < left: 70vw; >> 

   Добавляем анимацию в свойство animation :

    animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards, loop 3s linear forwards, x3 2s linear forwards; 

   Добавляем подходящую задержку. Здесь она составит 7.5s:

    animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s; 

   Окончательный результат

   Заключение

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

   Анимация движения CSS «Бегущий Санта». Покадровая анимация CSS @keyframes

   В сегодняшнем уроке я покажу вам как можно с помощью CSS реализовать на сайте (в HTML документе) анимацию в виде движущегося объекта. В нашем случае – это будет Санта Клаус (или Дед Мороз). И вот этот персонаж будет не просто шевелиться, он ещё будет и передвигаться с левой части окна браузера к правой.

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

   Например, у нас есть картинка, на которой изображён Санта Клаус. Эта картинка состоит из нескольких спрайтов (кадров). И если эти кадры быстро сменять один за другим, то мы получим эффект движущегося персонажа.

   

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

   Правило @keyframes

   Реализовывать анимацию мы будем с помощью правила CSS @keyframes. Это правило устанавливает стили для ключевых кадров анимации. То есть с помощью правила @keyframes мы указываем браузеру, как именно кадры должны менять друг друга и другие их стили (мы можем указать прозрачность, цвет, положение кадра и другие параметры).

   @keyframes  < [ from | to | ] [, from | to | ]* >

   • — это уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры.
   • from — первый ключевой кадр, аналогичен 0%.
   • to — последний ключевой кадр, аналогичен 100%.
   • — устанавливает ключевой кадр в процентах от времени всей анимации.

   Пример

   @keyframes myanime < from < left: 0; >to < left: 300px; >>

   В данном примере:

   • myanime – имя анимации;
   • from to — ключевые слова с помощью которых мы указываем как будет меняться значение свойства left (от 0 до 300px).

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

   Анимация движения CSS на реальном примере

   Давайте на реальном примере рассмотрим, как заставить наш персонаж не просто шевелиться, а ещё и передвигаться по экрану.

   Шаг 1. Первое что нам нужно – это создать отдельную папку для нашего проекта. Назовём её Run Santa.

   Шаг 2. Далее в папке Run Santa создадим ещё папку css (в ней будет храниться файл со стилями), папку img (в ней будет картинка с изображением Санты) и файл index.htm (это будет наш веб-документ, при запуске которого на экране в браузере появится бегущий Санта).

   Шаг 3. В папке css создадим файл style.css. Здесь мы немного позже пропишем стили (правила) нашей анимации.

   Шаг 4. Теперь нам нужно найти подходящую картинку со спрайтами. В строке поиска вводим поисковый запрос «sprite sheet Santa» («или спрайт Санта»). Переходим в раздел картинки и находим подходящую для наших целей спрайт анимацию. Сохраняем эту картинку в папку img.

   Шаг 5. Теперь давайте откроем файл index.html любым текстовым редактором и напишем в нём следующий код:

   Здесь мы сначала создаём контейнер для анимации и помещаем в этот контейнер нашу картинку.

   С помощью блока мы будем выводит в браузере картинку.

   Шаг 6. Теперь давайте перейдём в папку css и откроем любым текстовым редактором файл style.css.

   Шаг 7. В этом файле прописываем следующий код:

   .sprite-container < height: 100vh; /*100% высоты экрана*/ display: flex; align-items: center; /*чтобы картинка была по центру*/ >.sprite-image < height: 105px; /*высота спрайта (высота одного кадра)*/ width: 100px; /*ширина спрайта (ширина одного кадра)*/ background: url(https://d-nik.pro/images/stories/santa.jpg) 0px 0px; /*картинка со спрайтами с позицией в верхнем левом углу (0px 0px)*/ animation: play 0.8s steps(6) infinite, /*анимация называется play, скорость анимации 0.8s, нужно сделать 6 шагов (6 кадров), анимация происходит непрерывно (зациклено) - infinite*/ step 15s linear infinite; /*ещё одна анимация, длительностью 15s, линейный, зацикленый*/ position: absolute; left: 0; >@keyframes play < 100% < background-position: -600px; /*ширина картинки со спрайтами*/ >> @keyframes step < 100% < left: 100%; /*передвижение влево до самого конца*/ >>

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

   Читать:

   Как подключить часы на ios 12