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

Простые анимации

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

Основные шаги анимации

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

1. Очистить canvas Если фигура, которую вы собираетесь нарисовать, не занимает всю площадь canvas (как фон, например), то всё что было нарисовано ранее необходимо стереть. Проще всего это сделать при помощи метода clearRect() .
2. Сохранить изначальное состояние canvas Если вы изменяете любые настройки (такие как стили, трансформации и т.п.), которые затрагивают состояние canvas и вы хотите убедиться, что оригинальное состояние используется каждый раз, когда был отрисован кадр, то вам следует сохранить это оригинальное состояние.
3. Нарисовать анимированные фигуры Шаг на котором вы собственно отрисовываете кадр.
4. Восстановить состояние canvas Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.

Управление анимацией

Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя.

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

Запланированные обновления

Первый — это функции window.setInterval() (en-US), window.setTimeout() (en-US), и window.requestAnimationFrame() , которые могут быть использованы для вызова некоторой функции, через заданный промежуток времени.

Начинает периодически исполнять функцию function каждые delay миллисекунд.

Запускает выполнение указанной функции function через delay миллисекунд.

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

Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию setInterval() , которая многократно выполняет, предоставленный ей код. Если же вы планируете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать setTimeout() . Установив EventListener , вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.

Примечание: В примерах ниже мы будем использовать функцию window.requestAnimationFrame() для контроля анимации. Функция requestAnimationFrame является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью Анатомия видеоигр В Зоне разработке игр.

Анимированная солнечная система

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

var sun = new Image(); var moon = new Image(); var earth = new Image(); function init()  sun.src = "canvas_sun.png"; moon.src = "canvas_moon.png"; earth.src = "canvas_earth.png"; window.requestAnimationFrame(draw); > function draw()  var ctx = document.getElementById("canvas").getContext("2d"); ctx.globalCompositeOperation = "destination-over"; ctx.clearRect(0, 0, 300, 300); // clear canvas ctx.fillStyle = "rgba(0,0,0,0.4)"; ctx.strokeStyle = "rgba(0,153,255,0.4)"; ctx.save(); ctx.translate(150, 150); // Earth var time = new Date(); ctx.rotate( ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds(), ); ctx.translate(105, 0); ctx.fillRect(0, -12, 50, 24); // Shadow ctx.drawImage(earth, -12, -12); // Moon ctx.save(); ctx.rotate( ((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds(), ); ctx.translate(0, 28.5); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit ctx.stroke(); ctx.drawImage(sun, 0, 0, 300, 300); window.requestAnimationFrame(draw); > init(); 

canvas id="canvas" width="300" height="300">canvas> 

Анимированные часы

В этом примере создаются анимированные часы, показывающие правильное время.

function clock()  var now = new Date(); var ctx = document.getElementById("canvas").getContext("2d"); ctx.save(); ctx.clearRect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-Math.PI / 2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.lineWidth = 8; ctx.lineCap = "round"; // Hour marks ctx.save(); for (var i = 0; i  12; i++)  ctx.beginPath(); ctx.rotate(Math.PI / 6); ctx.moveTo(100, 0); ctx.lineTo(120, 0); ctx.stroke(); > ctx.restore(); // Minute marks ctx.save(); ctx.lineWidth = 5; for (i = 0; i  60; i++)  if (i % 5 != 0)  ctx.beginPath(); ctx.moveTo(117, 0); ctx.lineTo(120, 0); ctx.stroke(); > ctx.rotate(Math.PI / 30); > ctx.restore(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr = hr >= 12 ? hr - 12 : hr; ctx.fillStyle = "black"; // write Hours ctx.save(); ctx.rotate( hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec, ); ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20, 0); ctx.lineTo(80, 0); ctx.stroke(); ctx.restore(); // write Minutes ctx.save(); ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28, 0); ctx.lineTo(112, 0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); ctx.rotate((sec * Math.PI) / 30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30, 0); ctx.lineTo(83, 0); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.arc(95, 0, 10, 0, Math.PI * 2, true); ctx.stroke(); ctx.fillStyle = "rgba(0,0,0,0)"; ctx.arc(0, 0, 3, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 14; ctx.strokeStyle = "#325FA2"; ctx.arc(0, 0, 142, 0, Math.PI * 2, true); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); > window.requestAnimationFrame(clock); 

canvas id="canvas" width="150" height="150">canvas> 

Зацикленная панорама

В этом примере панорама прокручивается слева направо. Мы используем фото национального парка Йосемити взятое из Википедии, но вы можете использовать любое изображение, большее элемента canvas.

var img = new Image(); // User Variables - customize these to change the image being scrolled, its // direction, and the speed. img.src = "capitan_meadows,_yosemite_national_park.jpg"; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; //lower is faster var scale = 1.05; var y = -4.5; //vertical offset // Main program var dx = 0.75; var imgW; var imgH; var x = 0; var clearX; var clearY; var ctx; img.onload = function ()  imgW = img.width * scale; imgH = img.height * scale; if (imgW > CanvasXSize)  x = CanvasXSize - imgW; > // image larger than canvas if (imgW > CanvasXSize)  clearX = imgW; > // image larger than canvas else  clearX = CanvasXSize; > if (imgH > CanvasYSize)  clearY = imgH; > // image larger than canvas else  clearY = CanvasYSize; > //Get Canvas Element ctx = document.getElementById("canvas").getContext("2d"); //Set Refresh Rate return setInterval(draw, speed); >; function draw()  //Clear Canvas ctx.clearRect(0, 0, clearX, clearY); //If image is if (imgW  CanvasXSize)  //reset, start from beginning if (x > CanvasXSize)  x = 0; > //draw aditional image if (x > CanvasXSize - imgW)  ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH); > > //If image is > Canvas Size else  //reset, start from beginning if (x > CanvasXSize)  x = CanvasXSize - imgW; > //draw aditional image if (x > CanvasXSize - imgW)  ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); > > //draw image ctx.drawImage(img, x, y, imgW, imgH); //amount to move x += dx; > 

Заметьте, что ширина и высота должны совпадать со значениями CanvasXZSize и CanvasYSize .

canvas id="canvas" width="800" height="200">canvas> 

Другие примеры

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

Мы рассмотрим некоторые продвинутые методы анимации и физику в следующей главе.

• « Предыдущая статья
• Следующая статья »

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Мини-туториал по анимации в CSS и HTML5

Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

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

Давайте рассмотрим пример, где мы меняем цвет фона у элемента.

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >> 

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:

.element

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

• animation-name: имя анимации определенным правилом keyframes
• animation-duration: сколько времени займет один цикл анимации от 0% до 100%
• animation-timing-function: определяет кривые ускорения, такие как ease и linear
• animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
• animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
• animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
• animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
• animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

.element

Все эти свойства можно записать и одной строкой:

.element

Свойства анимации могут принимать значения, указанные в таблице:

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >> 

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

Добавим новый блок keyframes

@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >> 

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate; 

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

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

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

@keyframes rotate < from to > 

Далее мы использовали эту анимацию в списке стилей для элемента:

animation: rotate 1.5s infinite linear 

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.

 
Login 
Username
 
Password
 Submit
  

Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >> 

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

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

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

10 Примеров Анимаций созданных только при помощи CSS

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

Давайте взглянем на потрясающие проекты, созданные только при помощи HTML и CSS.

1. Велосепидист. Реализован только с помощью CSS

Здесь столько всего происходит, что очень трудно поверить что всё это работает только благодаря HTML и CSS! Сочетание вращающейся анимации и множественных многослойных движений создают иллюзию того, что велосипедист и его велосипед сделаны из желе. Обратите внимание на умное использование БЭМ в классах.

2. Сатурн и его Вращающиеся кольца

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

3. CSS анимация цветных слоёв

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

4. Загрузчик в форме мороженого на палочке

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

5. Анимация с голубем при помощи CSS

Использование HTML элементов для создания рисунков в паре с небольшой анимацией может привести к потрясающему результату, как к примеру, эта полная задора и веселья демка. Надо отдать должное Юлии Музафаровой за её кропотливый труд в создании всех этих кадров, связанных последовательно. Уж точно это заняло больше, чем пару чашечек кофе.

6. Дремлющий кот

Благодаря искусной комбинации простых HTML элементов и деликатной, игривой анимацией, этот чёрный кот оживает на глазах, привлекая своей харизмой. Проект построен на основе Sass и переменных, которые контролируют анимацию. Вы можете легко изменить параметры, чтобы посмотреть что произойдёт.

7. Чёрный медведь

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

8. Плескающаяся губка

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

9. Почтовый конверт

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

10. Загрузчик в форме машинки

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

Вдохновляйтесь и творите!

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

2.22. CSS3-анимация

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

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after . Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Введение в CSS-анимацию

• Содержание:
• 1. Ключевые кадры
• 1.1. Временная функция для ключевых кадров
• 2. Название анимации: свойство animation-name
• 3. Продолжительность анимации: свойство animation-duration
• 4. Временная функция: свойство animation-timing-function
• 5. Повтор анимации: свойство animation-iteration-count
• 6. Направление анимации: свойство animation-direction
• 7. Проигрывание анимации: свойство animation-play-state
• 8. Задержка анимации: свойство animation-delay
• 9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
• 10. Краткая запись анимации: свойство animation
• 11. Множественные анимации
• 12. Урок: создание анимации

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

IE: 10.0
Firefox: 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

See the Pen square loader by Elena Nazarova (@nazarelen) on CodePen.

1. Ключевые кадры

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

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

@keyframes имя анимации

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

@keyframes shadow < from 50% to >

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100% ) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

@keyframes move < from, to < top: 0; left: 0; >25%, 75% 50% >

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

Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.

После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation :

Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0% ).

1.1. Временная функция для ключевых кадров

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

@keyframes bounce < from < top: 100px; animation-timing-function: ease-out; >25% < top: 50px; animation-timing-function: ease-in; >50% < top: 100px; animation-timing-function: ease-out; >75% < top: 75px; animation-timing-function: ease-in; >to < top: 100px; >>

Пять ключевых кадров указаны для анимации с именем «bounce» . Между первым и вторым ключевым кадром (то есть между 0% и 25% ) используется функция замедления. Между вторым и третьим (то есть между 25% и 50% ) — функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по странице на 50px , замедляясь по мере того, как он достигнет своей наивысшей точки, а затем ускоряясь, когда он упадет до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.

Временная функция, указанная в ключевом кадре to или 100% , игнорируется.

2. Название анимации: свойство animation-name

Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.

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

Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис — или символ нижнего подчеркивания _ .

Свойство не наследуется.

animation-name
Значения:
none	Означает отсутствие анимации. Также используется, чтобы отменить анимацию элемента из группы элементов, для которых задана анимация. Значение по умолчанию.
имя анимации	Имя анимации, которое связывает правило @keyframes с селектором.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;

3. Продолжительность анимации: свойство animation-duration

Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.

Свойство не наследуется.

animation-duration
Значения:
время	Указывает время, которое анимация занимает для завершения одного цикла. Отрицательные значения недействительны. Если время равно 0s , ключевые кадры анимации не действуют, но сама анимация происходит мгновенно. Значение по умолчанию 0s .

animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

4. Временная функция: свойство animation-timing-function

Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.

Свойство не наследуется.

• jump-start — первый шаг происходит при значении 0
• jump-end — последний шаг происходит при значении 1
• jump-none — все шаги происходят в пределах диапазона (0, 1)
• jump-both — первый шаг происходит при значении 0 , последний — при значении 1
• start — ведет себя как jump-start
• end — ведет себя как jump-end

animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;

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

5. Повтор анимации: свойство animation-iteration-count

Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.

Свойство не наследуется.

animation-iteration-count
Значения:
infinite	Анимация проигрывается бесконечно.
число	Анимация будет повторяться указанное количество раз. Если число не является целым числом, анимация закончится в середине последнего цикла. Отрицательные числа недействительны. Значение 0 вызывает мгновенное срабатывание анимации.

animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

6. Направление анимации: свойство animation-direction

Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .

Свойство не наследуется.

animation-direction
Значения:
normal	Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
reverse	Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
alternate	Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
alternate-reverse	Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1 .

animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;

7. Проигрывание анимации: свойство animation-play-state

Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние :hover .

Свойство не наследуется.

animation-play-state
Значения:
running	Анимация выполняется. Значение по умолчанию.
paused	Анимация приостанавливается. При перезапуске анимация начинается с того места, где она была остановлена, как если бы «часы», управляющие анимацией, остановились и снова запустились. Если анимация остановлена во время задержки, при повторном воспроизведении время задержки также возобновляется.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

See the Pen EjRagd by Elena Nazarova (@nazarelen) on CodePen.

8. Задержка анимации: свойство animation-delay

Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms .

Свойство не наследуется.

animation-delay
Значения:
время	Время определяет длительность задержки между началом анимации (когда анимация применяется к элементу через свойства) и когда она начинает выполняться. Отрицательные значения разрешены, такая задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Значение по умолчанию 0s .

animation-delay: 5s; animation-delay: 3s, 10ms;

9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своим исходным стилям. По умолчанию анимация не влияет на значения свойств animation-name и animation-delay , когда анимация применяется к элементу. Кроме того, по умолчанию анимация не влияет на значения свойств animation-duration и animation-iteration-count после ее завершения. Свойство animation-fill-mode может переопределить это поведение.

Свойство не наследуется.

animation-fill-mode
Значения:
none	Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards	После того, как анимация заканчивается (как определено значением animation-iteration-count ), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards; ).
backwards	В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate ), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate ).
both	Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.

animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

10. Краткая запись анимации: свойство animation

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .

11. Множественные анимации

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