animation-fill-mode — Веб-технологии для разработчиков

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

Описание

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

Синтаксис

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

/* Несколько значений могут быть заданы через запятую. */
/* Каждое значение соответствует для анимации в animation-name. */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none

Стили анимации не будут применены к элементу до и после ее выполнения.

forwards

По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями animation-direction и animation-iteration-count:

animation-direction	animation-iteration-count	последний ключевой кадр
normal	любое	100% или to
reverse	любое	0% или from
alternate	четное	0% или from
alternate	нечетное	100% или to
alternate-reverse	четное	100% или to
alternate-reverse	нечетное	0% или from

backwards

Элемент сохранит стиль первого ключевого кадра на протяжении периода animation-delay. Первый ключевой кадр определяется значением animation-direction:

animation-direction	первый ключевой кадр
normal или alternate	0% или from
reverse или alternate-reverse	100% или to

both

Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

Формальный синтаксис

<single-animation-fill-mode>#
где 
<single-animation-fill-mode> = none | forwards | backwards | both

Пример

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div>
  <div>Этот просто растет</div>
  <div>Этот растет и остается большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

Спецификации

Совместимость с браузерами

Смотрите также

Урок: создание анимации

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

Анимация состоит из плавных изменений одного состояния элемента в другое с помощью функций перехода animation-timing-function на протяжении указанного времени. На каждом этапе анимации можно задавать свою функцию перехода.

Самое главное при создании анимации — правильно задать ключевые моменты. Анимация может начинаться с 50%, а начальное и конечное состояния анимируемого элемента будут соответствовать заданному в свойствах элемента (так называемые вычисляемые значения).

Основные элементы (башня, дом, одиночное облако) рисуются с помощью CSS-стилей, а элементы отделки (крыша, окна и маленькое облачко) — с использованием псевдоэлементов :before и :after.

<div>
  <div>
  <div></div>
  <div></div>
  <div></div>
  </div>
  <div>
  <div></div>
  <div></div>
  <div></div>
  </div>
  <div></div>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div> 

body {
  margin: 0;
  background: white;  /*скрываем облака, когда они будут выходит за границы голубого блока*/
}
.picture {
  width: 270px;
  height: 270px;
  background: #CFDEE6;
  border-radius: 50%;
  margin: 50px auto 0;
  position: relative;  /*задаем относительное позиционирование, чтобы абсолютно позиционировать элементы внутри*/
  overflow: hidden;  /*скрываем облака, когда они будут уходить за границы блока*/
}
.tower {
  width: 36px;
  height: 96px;
  background: white;
  position: absolute;
  bottom: 84px;
  left: 66px;
}
.tower:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 24px solid #D56851;
  position: absolute;
  top: -24px;
}
.tower:after {
  content: "";
  width: 12px;
  height: 15px;
  background: #6D6D6D;
  position: absolute;
  top: 12px;
  left: 12px;
}
.house {
  width: 126px;
  height: 36px;
  background: white;
  position: absolute;
  left: 75px;
  bottom: 84px;
}
.house:before {
  content: "";
  width: 110px;
  height: 0;
  border-bottom: 15px solid #D56851;
  border-right: 16px solid transparent;
  position: absolute;
  top: -15px;
}
.house:after {
  content: "";
  width: 83px;
  height: 21px;
  background: #D56851;
  position: absolute;
  top: -36px;
  left: 27px;
}  
ul {
  margin: 7px 0 0 27px;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 12px;
  height: 18px;
  background: #6D6D6D;
}
li:nth-child(3) {
  margin-right: 10px;
}
@-webkit-keyframes clouds {
  50% {left: 270px; opacity: 0.5}  /*перемещаем блок с облаками за правый край голубого блока, постепенно делая блок прозрачным*/
  51% {opacity: 0;}  /*чтобы когда он начал перемещаться за левый край голубого блока, его не было видно*/
  100% {opacity: 0; left: -110px;}  /*смещаем блок с облаками за левую границу голубого блока*/
}
@keyframes clouds {
  50% {left: 270px; opacity: 0.5}
  51% {opacity: 0;}
  100% {opacity: 0; left: -110px;}
}
.clouds {
  width: 110px;
  height: 40px;
  position: relative;
  overflow: hidden;
  top: 60px;
  left: -110px; 
  -webkit-animation: clouds 20s linear infinite;
  animation: clouds 20s linear infinite;
}
.clouds-two {
  width: 110px;
  height: 40px;
  position: relative;
  overflow: hidden;
  top: 20px;
  left: -110px; 
  -webkit-animation: clouds 20s linear infinite 10s;  /*добавляем для второго блока с облаками задержку в анимации*/
  animation: clouds 20s linear infinite 10s;
}
.cloud {
  background: white;
  position: absolute;
}
.one {
  width: 30px;
  height: 15px;
  border-radius: 60px 60px 0 0;
  top: 0;
  left: 0;
}
.one:after {
  content: "";
  width: 20px;
  height: 8px;
  background: white;
  border-radius: 40px 40px 0 0;
  position: absolute;
  left: 20px;
  top: 7px;
}
.two {
  width: 24px;
  height: 10px;
  border-radius: 48px 48px 0 0;
  top: 30px;
  left: 30px;
}
.three {
  width: 30px;
  height: 15px;
  border-radius: 60px 60px 0 0;
  top: 25px;
  left: 80px;
}
.three:before {
  content: "";
  width: 20px;
  height: 8px;
  background: white;
  border-radius: 40px 40px 0 0;
  position: absolute;
  left: -10px;
  top: 7px;
} 
   

CSS анимация с помощью ключевых кадров

Вследствие того, что CSS развивается стремительными темпами и создавать анимацию стало еще проще без использования Javascript на многих сайтах появились очень интересные элементы, которыми нельзя не заинтересоваться. В сегодняшнем уроке мы посмотрим как можно создавать анимацию с помощью ключевых кадров (это еще интереснее чем просто с помощью CSS преобразований). Также наша анимация будет находится не просто в одной плоскости, а будет с эффектом 3D. Если вы не знаете для чего и где можно применить такой эффект — переходите в полную новость и там я вам об этом расскажу.

Сегодня мы идем дальше в изучении CSS анимации. Поэтому рекомендую изучить предыдущие уроки «Анимация с помощью CSS преобразований» (эта анимация значительно проще, а изучив ее — здесь вы также с легкостью всё поймете 🙂 ):

Если CSS преобразований из предыдущей серии уроков работали в браузерах Firefox, Chrome, Safari и Internet Explorer 10+, то в при создании 3D анимации она будет работать только в WebKit браузерах и браузере Mozilla. Самые простые преобразования будут работать и в IE10, но что-то более сложное — нет, так как этот браузер не поддерживает параметр preserve-3d для создания 3D слоев.

Анимация CSS

Анимация, которую мы создадим будет содержать в себе изображение, которое вращается вокруг оси Y:

Для тех, у кого нет анимации 😉 :

Немного HTML

Всё понятно и просто в HTML структуре:

1
2
3

<div> 
    <p>Классно?!</p>
</div>

Ключевые кадры CSS

Что такое ключевые кадры?

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

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

Определим начальный и конечный ключевой кадр:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* WebKit и Opera */ 
@-webkit-keyframes spinner { 
    from { 
        -webkit-transform: rotateY(0deg); 
    } 
    to { 
        -webkit-transform: rotateY(-360deg); 
    } 
} 
 
/* Все остальные браузеры */ 
@keyframes spinner { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg);
    } 
}

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

Создаем сцену

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

Для сцены мы будем использовать новое для нас свойство perspective, которое придает глубину. Значение задается в пикселях. Оно определяет расстояние от пользователя до элементов в перспективе. Знаю, это сложно сразу понять 🙂 . Давайте уменьшим с 1200px до 300px и взгляните на результат ниже:

А также видео:

Связываем анимацию с элементом

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

А свойства следующие:

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

#spinner { 
    width: 250px;
    height: 290px;
    background: url('https://sitehere.ru/wp-content/uploads/2014/10/baby-l1.jpg') no-repeat; 
    text-align: center; 
    color: #fff;
    margin:0 auto;
 
 
    -webkit-animation-name: spinner; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 6s; 
 
    animation-name: spinner;  /* указываем на ключевые кадры анимации с названием "spinner" */
    animation-timing-function: linear; /* функция синхронизации, с помощью которой будут происходить преобразования */
    animation-iteration-count: infinite; /* количество повторов анимации. "infinite" - значит бесконечно */
    animation-duration: 6s; /* длительность анимации */
 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; /* указываем что это 3D преобразование */
} 
 
#spinner:hover { 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; /* останавливаем анимацию */
}

Я подписал свойства без префиксов, потому что те выполняют аналогичные функции, только для других браузеров. Также хочу заметить что мы останавливаем анимацию с помощью специального свойства animation-play-state при наведении на изображение.

Вывод

Возможно и сейчас кто-нибудь может сказать «А где же я на своём сайте могу применить этот эффект?». Первое что пришло мне в голову — это оповещение о каком-либо событии. Согласитесь, когда что-то вращается, да еще и так красиво, оно обязательно привлечет внимание!

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

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

Успехов!

С Уважением, Юрий Немец

Список лучших инструментов для web-анимации / Хабр

Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.

В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.

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

Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll

SVG

Snap.svg

Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работой с SVG вообще. Современная версия Raphael.js

Минимальный вес: 81кб
Ссылка

Отличная библиотека с кучей крутейших плагинов и хорошей документацией. Заявляется лучшая производительность в сравнении с Snap.svg и Raphael.js

Минимальный вес: 64кб
Ссылка

Библиотека может быть интересна своей легковесностью. Автором не развивается.

Минимальный вес: 9кб
Ссылка

Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.

Минимальный вес: 11кб
Ссылка

Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.

Минимальный вес: 91кб
Ссылка

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

Минимальный вес: 4кб
Ссылка

Интересна в качестве экспоната, автором не развивается, к сожалению.

Минимальный вес: 130кб
Ссылка

Неплохое, хотя и слегка тяжеловесное решение для лоадера.

Минимальный вес: 21кб
Ссылка

Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.

Минимальный вес: 22кб
Ссылка

Серьёзное решение для JS анимации, используется многими большими ребятами и активно поддерживается автором.

Минимальный вес: 43кб
Ссылка

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

Минимальный вес: 130кб
Ссылка

DOM

GSAP

Анимационный гигант мира front-end. Сверх-производительность и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.

Минимальный вес: 41кб
Ссылка

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

Минимальный вес: 11кб
Ссылка

Совсем небольшая утилита, если размер библиотеки очень критичен, то можно рассмотреть и её.

Минимальный вес: 6кб
Ссылка

Неплохое решение и легковесное решение с удобным интерфейсом.

Минимальный вес: 14кб
Ссылка

Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).

Минимальный вес: 8кб
Ссылка

Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 8кб
Ссылка

Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 50кб
Ссылка

Позиционирует себя как «Sprite based animation library», выделяется легковесностью.

Минимальный вес: 4кб
Ссылка

Подойдёт для простых решений, может похвастаться удобным интерфейсом.

Минимальный вес: 22кб
Ссылка

Just Animate

Свежая библиотека, выделяется легковесностью. Активно развивается автором.

Минимальный вес: 14кб
Ссылка

Popmotion

Серьёзная и комплексная штука. Создатели позиционируют её как более легковесный аналог GSAP. Выделяется интеграцией в React, относительно небольшим весом и классной работой с SVG.
За наводку спасибо exdeniz

Минимальный вес: 41кб
<a href=«popmotion.io> Ссылка

Canvas

CreateJS

Швейцарский нож для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (ex Flash Pro). Очень серьёзная штука, подойдёт как для рекламы/промо, так и для создания HTML5 игр.

Минимальный вес: 186кб
Ссылка

Может быть интересна как экспонат. Автором не развивается.

Минимальный вес: 36кб
Ссылка

Интересная библиотека, которая может рендерить в Canvas, SVG и даже WebGl. Активно развивается, достаточно производительная и радует функционалом.

Минимальный вес: 50кб
Ссылка

Минимальный вес: 73кб
Ссылка

Позиционируется как „Object-based canvas drawing“. Автором не заброшена.

Fabric.js

Подойдёт не только для анимации Canvas, но и как абстракция для работы с ним.

Минимальный вес: 248кб
Ссылка

Позиционирует себя как „Vector graphics scripting framework“. Серьёзный и интенсивно развивающийся инструмент.

Минимальный вес: 277кб
Ссылка

Неплохой инструмент для анимации и вообще для работы с Canvas.

Минимальный вес: 138кб
Ссылка

Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
В планах WebGL и SVG.

За библиотеку спасибо Keyten

Минимальный вес: 84кб
Ссылка

PixiJS

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

Минимальный вес: 414кб
Ссылка

Scroll

AOS

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

Минимальный вес: 13кб
Ссылка

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

Минимальный вес: 13кб
Ссылка

Легковесная и бесплатная для коммерческого использования.

Минимальный вес: 9кб
Ссылка

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

Минимальный вес: 17кб
Ссылка

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

Минимальный вес: 12кб
Ссылка

Easing

Ceaser

GUI-инструмент для генерации нужный временных кривых.

Ссылка

Инструмент для генерации временных кривых, не лучше и не хуже других.

Ссылка

Ещё один инструмент для генерации временных кривых.

Ссылка

GUI

Stylie

GUI инструмент для генерации CSS-анимации.

Ссылка

Ещё один GUI инструмент для генерации CSS-анимации.

Ссылка

Небольшой набор CSS-лоадеров. Есть возможность кастомизировать цвета.

Ссылка

Неплохой генератор CSS-анимаций.

Ссылка

GUI-инструмент для генерации CSS-анимаций. Не лучше и не хуже других.

Ссылка

На данный момент — самый функциональный и интересный GUI-инструмент. Можно попробовать хотя бы ради интереса.

Ссылка

CSS

Magic animations

Большой набор CSS-классов с различными анимациями.

Минимальный вес: 16кб
Ссылка

Большущая коллекция CSS-классов с анимациями.

Минимальный вес: 17кб
Ссылка

Небольшой набор CSS-лоадеров.

Ссылка

GUI-инструмент для генерации CSS-анимаций.

Ссылка

Небольшая библиотека CSS-классов с анимациями.

Минимальный вес: 12кб
Ссылка

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

Кроме того, доступна GUI версия каталога с фильтрами по категориям и размеру.

animation-delay | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

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

Синтаксис

animation-delay: <время>[, <время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-delay</title>
  <style>
   @-webkit-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-moz-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-o-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   .flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    /* Задержка перед началом */
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
   }
  </style>
 </head>
 <body>
  <h2>Добро пожаловать!</h2>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay.

animation-fill-mode — Веб-технологии для разработчиков

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

Описание

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

Синтаксис

 режим заполнения анимации: нет;
режим заливки анимации: вперед;
режим заливки анимации: назад;
режим заливки-анимации: оба;

/ * Несколько значений могут быть заданы через запятую. * /
/ * Каждое значение соответствует анимации в animation-name .  * /
режим-заливки-анимации: нет, назад;
режим заливки-анимации: оба, вперед, нет;
 

Значения

нет

Стили анимации не будут применены к элементу до и после ее выполнения.

вперед

По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяет значения animation-direction и animation-iteration-count :

анимационное направление	количество итераций анимации	последний ключевой кадр
нормальный	любое	100% или до
реверс	любое	0% или из
альтернативный	четное	0% или из
альтернативный	нечетное	100% или до
чередование-реверс	четное	100% или до
чередование-реверс	нечетное	0% или из

назад

Элемент сохранит стиль первого ключевого кадра на протяжении периода анимация-задержка .Первый ключевой кадр значением animation-direction :

анимационное направление	первый ключевой кадр
нормальный или альтернативный	0% или из
реверс или попеременно-реверс	100% или до

оба

Анимация будет вести себя так, как будто бы вперед и назад заданы одновременно.

Формальный синтаксис

  # 
 где 
   = none | нападающие | назад | оба  
 

Пример

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

HTML

 
 Наведите курсор мыши на серый блок 

  
 Этот просто растет 
  
 Этот растет и остается большим 
 

CSS

.demo {
  верхняя граница: 100 пикселей сплошной #ccc;
  высота: 300 пикселей;
  семейство шрифтов: без засечек;
}
@keyframes grow {
    0% {font-size: 0}
    100% {font-size: 40px}
}
@ -webkit-keyframes растут {
    0% {font-size: 0}
    100% {font-size: 40px}
}
.demo: hover .grows {
    имя-анимации: расти;
    продолжительность анимации: 3 секунды;
    -webkit-animation-name: расти;
    -webkit-animation-duration: 3 секунды;
}
.demo: hover .growsandstays {
    имя-анимации: расти;
    продолжительность анимации: 3 секунды;
    режим заливки анимации: вперед;
    -webkit-animation-name: расти;
    -webkit-animation-duration: 3 секунды;
    -webkit-animation-fill-mode: вперед;
} 

Спецификации

Совместимость с браузерами

Смотрите также

Урок: создание анимации

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

Анимация состоит из плавных изменений одного состояния в другом с помощью функций перехода animation-time-function на время перехода.На каждом этапе анимации можно задавать свою функцию перехода.

Самое главное при создании анимации — правильно задать ключевые моменты. Анимация может начинаться с 50% , а начальное и конечное состояния анимируемого будут соответствовать заданным свойствам элемента (так называемые вычисляемые значения).

См. Анимацию «Облака пера» от Елены Назаровой (@nazarelen) на CodePen.

Основные элементы (башня, дом, одиночное облако) рисуются с помощью CSS-стилей, а элементы отделки (крыша, окна и маленькое облачко) — с использованием псевдоэлементов : до и : после .

  кузов {
  маржа: 0;
  фон: белый; / * скрываем облака, когда они будут выходить за границу голубого блока * /
}
.картина {
  ширина: 270 пикселей;
  высота: 270 пикселей;
  фон: # CFDEE6;
  радиус границы: 50%;
  маржа: 50 пикселей авто 0;
  положение: относительное; / * задаем относительное позиционирование, чтобы абсолютно позиционировать элементы внутри * /
  переполнение: скрыто; / * скрываем облака, когда они будут уходить за границу блока * /
}
.tower {
  ширина: 36 пикселей;
  высота: 96 пикселей;
  фон: белый;
  позиция: абсолютная;
  внизу: 84px;
  слева: 66 пикселей;
}
.башня: до {
  содержание: "";
  ширина: 0;
  высота: 0;
  border-left: 18 пикселей сплошной прозрачный;
  border-right: сплошная прозрачная 18 пикселей;
  нижняя граница: сплошная 24 пикселя # D56851;
  позиция: абсолютная;
  верх: -24px;
}
.tower: after {
  содержание: "";
  ширина: 12 пикселей;
  высота: 15 пикселей;
  фон: # 6D6D6D;
  позиция: абсолютная;
  верх: 12 пикселей;
  слева: 12 пикселей;
}
.дом {
  ширина: 126 пикселей;
  высота: 36 пикселей;
  фон: белый;
  позиция: абсолютная;
  слева: 75 пикселей;
  внизу: 84px;
}
.дом: до {
  содержание: "";
  ширина: 110 пикселей;
  высота: 0;
  нижняя граница: сплошная 15 пикселей # D56851;
  граница справа: сплошная прозрачная 16 пикселей;
  позиция: абсолютная;
  верх: -15 пикселей;
}
.house: после {
  содержание: "";
  ширина: 83 пикс;
  высота: 21 пикс;
  фон: # D56851;
  позиция: абсолютная;
  верх: -36 пикселей;
  слева: 27 пикселей;
}
ul {
  маржа: 7px 0 0 27px;
  отступ: 0;
  стиль списка: нет;
}
li {
  дисплей: встроенный блок;
  ширина: 12 пикселей;
  высота: 18 пикселей;
  фон: # 6D6D6D;
}
li: nth-child (3) {
  поле справа: 10 пикселей;
}
@ -webkit-keyframes clouds {
  50% {left: 270px; непрозрачность: 0.5} / * перемещаем блок с облаками за правый край голубого блока, постепенно делая блок прозрачным * /
  51% {opacity: 0;} / * чтобы когда он начал перемещаться за левый край голубого блока, его не было видно * /
  100% {непрозрачность: 0; left: -110px;} / * смещаем блок с облаками за левую границу голубого блока * /
}
@keyframes clouds {
  50% {left: 270px; непрозрачность: 0,5}
  51% {opacity: 0;}
  100% {непрозрачность: 0; left: -110px;}
}
.clouds {
  ширина: 110 пикселей;
  высота: 40 пикселей;
  положение: относительное;
  переполнение: скрыто;
  верх: 60 пикселей;
  слева: -110 пикселей;
  -webkit-animation: облака 20с линейно бесконечные;
  анимация: облака 20с линейные бесконечные;
}
.clouds-two {
  ширина: 110 пикселей;
  высота: 40 пикселей;
  положение: относительное;
  переполнение: скрыто;
  верх: 20 пикселей;
  слева: -110 пикселей;
  -webkit-animation: облака 20 секунд линейные бесконечные 10 секунд; / * добавляем для второго блока с облаками задержку в анимации * /
  анимация: облака 20сек линейные бесконечные 10сек;
}
.cloud {
  фон: белый;
  позиция: абсолютная;
}
.один {
  ширина: 30 пикселей;
  высота: 15 пикселей;
  радиус границы: 60 пикселей 60 пикселей 0 0;
  верх: 0;
  слева: 0;
}
.один: после {
  содержание: "";
  ширина: 20 пикселей;
  высота: 8 пикселей;
  фон: белый;
  радиус границы: 40 пикселей 40 пикселей 0 0;
  позиция: абсолютная;
  слева: 20 пикселей;
  верх: 7 пикселей;
}
.два {
  ширина: 24 пикселя;
  высота: 10 пикселей;
  радиус границы: 48 пикселей 48 пикселей 0 0;
  верх: 30 пикселей;
  слева: 30 пикселей;
}
.три {
  ширина: 30 пикселей;
  высота: 15 пикселей;
  радиус границы: 60 пикселей 60 пикселей 0 0;
  верх: 25 пикселей;
  слева: 80 пикселей;
}
.three: before {
  содержание: "";
  ширина: 20 пикселей;
  высота: 8 пикселей;
  фон: белый;
  радиус границы: 40 пикселей 40 пикселей 0 0;
  позиция: абсолютная;
  слева: -10px;
  верх: 7 пикселей;
}  

CSS анимация с помощью ключевых кадров

Вследствие того, что CSS развивается, стало проще без использования Javascript на многих сайтах появились очень интересные элементы, которые нельзя не заинтересоваться. В сегодняшнем уроке мы посмотрим, как создать анимацию с помощью ключевых кадров (это еще интереснее, чем просто с помощью преобразователей CSS). Также наша анимация будет находится не просто в одной плоскости, а будет с эффектом 3D.Если вы не знаете для чего и где можно применить такой эффект — переходите в полную новость и там я вам об этом расскажу.

Сегодня мы идем дальше в изучении CSS анимации. Поэтому рекомендую предыдущие уроки «Анимация с помощью преобразований CSS» (эта анимация значительно проще, а изучите ее — здесь вы также с легкостью всё поймете 🙂):

Если преобразователи CSS из предыдущих серий уроков работали в браузерах Firefox, Chrome, Safari и Internet Explorer 10+, то при создании 3D-анимации она будет работать только в браузерах WebKit и браузерах Mozilla.Самые простые преобразования будут работать и в IE10, но что-то более сложное — нет, так как этот браузер не поддерживает параметр preserve-3d для создания 3D-слоев.

Анимация CSS

Анимация, которую мы создадим будет содержать в себе изображение, которое вращается вокруг оси Y:

Для тех, у кого нет анимации 😉:

Немного HTML

Всё понятно и просто в HTML-структуре:

 1
2
3
 

 

    
 Классно ?! 
 

Ключевые кадры CSS

Что такое ключевые кадры?

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

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

Определим начальный и конечный ключевой кадр:

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
 

 / * WebKit и Opera * /
@ -webkit-keyframes spinner {
    от {
        -webkit-transform: rotateY (0deg);
    }
    to {
        -webkit-transform: rotateY (-360deg);
    }
}

/ * Все остальные браузеры * /
@keyframes spinner {
    от {
        -moz-transform: rotateY (0deg);
        -ms-transform: rotateY (0deg);
        преобразовать: rotateY (0deg);
    }
    to {
        -moz-transform: rotateY (-360deg);
        -ms-transform: rotateY (-360deg);
        преобразовать: rotateY (-360deg);
    }
} 

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

Создаем сцену

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

Для сцены мы будем использовать новое для нас свойство перспективы, которое придает глубину. Значение задается в пикселях. Оно размер от пользователя до элементов в перспективе. Знаю, это сложно сразу понять 🙂. Давайте уменьшим с 1200px до 300px и взгляните на результат ниже:

А также видео:

Связываем анимацию с элементом

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

А свойства следующие:

 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
 

 #spinner {
    ширина: 250 пикселей;
    высота: 290 пикселей;
    фон: url ('https: // sitehere.ru / wp-content / uploads / 2014/10 / baby-l1.jpg ') no-repeat;
    выравнивание текста: центр;
    цвет: #fff;
    маржа: 0 авто;


    -webkit-animation-name: spinner;
    -webkit-animation-time-function: линейный;
    -webkit-animation-iteration-count: бесконечно;
    -webkit-animation-duration: 6 секунд;

    имя-анимации: прядильщик; / * указываем на ключевые кадры анимации с названием "spinner" * /
    функция-время-анимация: линейная; / функция * синхронизации, с помощью которой будут происходить преобразования * /
    количество итераций анимации: бесконечно; / * количество повторов анимации."бесконечный" - значит бесконечно * /
    продолжительность анимации: 6 с; / * длительность анимации * /

    -webkit-transform-style: сохранить-3d;
    -moz-transform-style: сохранить-3d;
    -ms-transform-style: сохранить-3d;
    стиль преобразования: сохранить-3d; / * указываем что это 3D-преобразование * /
}

#spinner: hover {
    -webkit-animation-play-state: приостановлено;
    состояние воспроизведения анимации: приостановлено; / * останавливаем анимацию * /
} 

Я подписал свойства без префиксов, потому что те работают аналогичные функции, только для других браузеров.Также хочу заметить что мы останавливаем анимацию с помощью специальных свойств animation-play-state при наведении на изображение.

Вывод

Возможно и сейчас кто-нибудь может сказать «А где же я на своём сайте могу применить этот эффект?». Первое что пришло мне в голову — это оповещение о каком-либо событии. Согласитесь, когда что-то вращается, да еще и так красиво, оно обязательно привлечь внимание!

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

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

Успехов!

С Уважением, Юрий Немец

Список лучших инструментов для web-анимации / Хабр

Список лучших инструментов для web-анимации. SVG / CSS / Canvas / DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.

В будущем список будет дополнен книгами и видео-курсами по web-анимации. Пожалуйста, напишите об этом и я добавлю его.

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

Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll

SVG

Snap.svg

Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работы с SVG вообще. Современная версия Raphael.js

Минимальный вес: 81кб
Ссылка

Отличная библиотека с кучей крутейших плагинов и хорошей документацией.Заявляется лучшая производительность в сравнении Snap.svg и Raphael.js

Минимальный вес: 64кб
Ссылка

Библиотека может быть интересна своей легковесностью. Автором не развивается.

Минимальный вес: 9кб
Ссылка

Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.

Минимальный вес: 11кб
Ссылка

Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.

Минимальный вес: 91кб
Ссылка

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

Минимальный вес: 4кб
Ссылка

Интересна в качестве экспоната, автором не развивается, к сожалению.

Минимальный вес: 130кб
Ссылка

Неплохое, хотя и слегка тяжеловесное решение для лоадера.

Минимальный вес: 21кб
Ссылка

Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.

Минимальный вес: 22кб
Ссылка

Серьёзное решение для JS анимации, используется большим ребятами и активно используемым автором.

Минимальный вес: 43кб
Ссылка

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

Минимальный вес: 130кб
Ссылка

DOM

GSAP

Анимационный гигант мира front-end. Сверх-функция и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.

Минимальный вес: 41кб
Ссылка

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

Минимальный вес: 11кб
Ссылка

Совсем небольшая утилита, если размер библиотеки очень критичен, то можно и рассмотреть её.

Минимальный вес: 6кб
Ссылка

Неплохое решение и легковесное решение с интерфейссом.

Минимальный вес: 14кб
Ссылка

Библиотека для простой анимации текста, к сожалению, нуждается в достаточно тяжёлых зависимостях таких (как JQuery).

Минимальный вес: 8кб
Ссылка

Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 8кб
Ссылка

Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 50кб
Ссылка

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

Минимальный вес: 4кб
Ссылка

Подойдёт для простых решений, может похвастаться интерфейсом.

Минимальный вес: 22кб
Ссылка

Just Animate

Свежая библиотека, выделяется легковесностью. Активно развивается автором.

Минимальный вес: 14кб
Ссылка

Popmotion

Серьёзная и комплексная штука. Создатели позиционируют её как более легковесный аналог GSAP. Выделяется интеграцией в React, относительно небольшой весом и классной работой с SVG.
За наводку спасибо exdeniz

Минимальный вес: 41кб
Ссылка

Canvas

CreateJS

Швейский для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (бывшая Flash Pro). Очень серьёзная штука, подойдёт как для рекламы / промо, так и для создания HTML5 игр.

Минимальный вес: 186кб
Ссылка